added control titles

This commit is contained in:
Danny Coates 2019-02-20 19:59:29 -08:00
parent 2169a49d4c
commit f0a60d8c8e
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
7 changed files with 34 additions and 13 deletions

View File

@ -64,6 +64,7 @@ class Account extends Component {
<button <button
class="p-2 border rounded text-blue-dark border-blue-dark hover:text-white hover:bg-blue-dark focus:outline" class="p-2 border rounded text-blue-dark border-blue-dark hover:text-white hover:bg-blue-dark focus:outline"
onclick="${e => this.login(e)}" onclick="${e => this.login(e)}"
title="${translate('signInMenuOption')}"
> >
${translate('signInMenuOption')} ${translate('signInMenuOption')}
</button> </button>
@ -89,6 +90,7 @@ class Account extends Component {
<button <button
class="block w-full text-left px-4 py-2 text-grey-darkest hover:bg-blue hover:text-white cursor-pointer focus:outline" class="block w-full text-left px-4 py-2 text-grey-darkest hover:bg-blue hover:text-white cursor-pointer focus:outline"
onclick="${e => this.logout(e)}" onclick="${e => this.logout(e)}"
title="${translate('logOut')}"
> >
${translate('logOut')} ${translate('logOut')}
</button> </button>

View File

@ -159,6 +159,7 @@ module.exports = function(state, emit, archive) {
<button <button
class="text-blue-dark hover:text-blue-darker focus:text-blue-darker focus:outline self-end flex items-center" class="text-blue-dark hover:text-blue-darker focus:text-blue-darker focus:outline self-end flex items-center"
onclick=${copy} onclick=${copy}
title="${state.translate('copyUrlHover')}"
> >
<img src="${assets.get('copy-16.svg')}" class="mr-2" /> <img src="${assets.get('copy-16.svg')}" class="mr-2" />
${state.translate('copyUrlHover')} ${state.translate('copyUrlHover')}
@ -168,6 +169,7 @@ module.exports = function(state, emit, archive) {
<button <button
class="text-blue-dark hover:text-blue-darker focus:text-blue-darker self-end flex items-center" class="text-blue-dark hover:text-blue-darker focus:text-blue-darker self-end flex items-center"
onclick=${share} onclick=${share}
title="Share"
> >
<img src="${assets.get('share-24.svg')}" class="mr-2" /> Share <img src="${assets.get('share-24.svg')}" class="mr-2" /> Share
</button> </button>
@ -196,7 +198,8 @@ module.exports = function(state, emit, archive) {
<input <input
type="image" type="image"
class="float-right self-center text-white hover:opacity-75 focus:outline" class="float-right self-center text-white hover:opacity-75 focus:outline"
alt="Delete" alt="${state.translate('deleteButtonHover')}"
title="${state.translate('deleteButtonHover')}"
src="${assets.get('close-16.svg')}" src="${assets.get('close-16.svg')}"
onclick=${del}/> onclick=${del}/>
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1> <h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
@ -243,7 +246,9 @@ module.exports.wip = function(state, emit) {
${list( ${list(
Array.from(state.archive.files) Array.from(state.archive.files)
.reverse() .reverse()
.map(f => fileInfo(f, remove(f))), .map(f =>
fileInfo(f, remove(f, state.translate('deleteButtonHover')))
),
'bg-grey-lightest rounded-t list-reset overflow-y-auto px-6 py-4 md:h-full md:max-h-half-screen', 'bg-grey-lightest rounded-t list-reset overflow-y-auto px-6 py-4 md:h-full md:max-h-half-screen',
'bg-white px-2 my-2 shadow-light rounded' 'bg-white px-2 my-2 shadow-light rounded'
)} )}
@ -252,26 +257,29 @@ module.exports.wip = function(state, emit) {
> >
<input <input
id="file-upload" id="file-upload"
class="opacity-0 w-0" class="opacity-0 w-0 h-0 appearance-none"
type="file" type="file"
multiple multiple
onfocus="${focus}" onfocus="${focus}"
onblur="${blur}" onblur="${blur}"
onchange="${add}" onchange="${add}"
/> />
<label <div
for="file-upload" class="flex flex-row items-center justify-between w-full p-2"
class="flex flex-row items-center justify-between w-full p-2 cursor-pointer" title="${state.translate('addFilesButton')}"
>
<label
for="file-upload"
class="flex items-center cursor-pointer"
title="${state.translate('addFilesButton')}" title="${state.translate('addFilesButton')}"
> >
<div class="flex items-center">
<img src="${assets.get('addfiles.svg')}" class="w-6 h-6 mr-2" /> <img src="${assets.get('addfiles.svg')}" class="w-6 h-6 mr-2" />
${state.translate('addFilesButton')} ${state.translate('addFilesButton')}
</div> </label>
<div class="font-normal text-sm text-grey-darker"> <div class="font-normal text-sm text-grey-darker">
${state.translate('totalSize', { size: bytes(state.archive.size) })} ${state.translate('totalSize', { size: bytes(state.archive.size) })}
</div> </div>
</label> </div>
</div> </div>
${expiryOptions(state, emit)} ${password(state, emit)} ${expiryOptions(state, emit)} ${password(state, emit)}
<button <button
@ -316,12 +324,13 @@ module.exports.wip = function(state, emit) {
}); });
} }
function remove(file) { function remove(file, desc) {
return html` return html`
<input <input
type="image" type="image"
class="self-center text-white ml-4 h-4 hover:opacity-75 focus:outline" class="self-center text-white ml-4 h-4 hover:opacity-75 focus:outline"
alt="Delete" alt="${desc}"
title="${desc}"
src="${assets.get('close-16.svg')}" src="${assets.get('close-16.svg')}"
onclick="${del}" onclick="${del}"
/> />
@ -359,7 +368,8 @@ module.exports.uploading = function(state, emit) {
<progress class="my-3" value="${progress}">${progressPercent}</progress> <progress class="my-3" value="${progress}">${progressPercent}</progress>
<button <button
class="text-blue-dark hover:text-blue-darker focus:text-blue-darker self-end font-medium" class="text-blue-dark hover:text-blue-darker focus:text-blue-darker self-end font-medium"
onclick=${cancel}> onclick=${cancel}
title="${state.translate('uploadingPageCancel')}">
${state.translate('uploadingPageCancel')} ${state.translate('uploadingPageCancel')}
</button> </button>
</send-upload-area>`; </send-upload-area>`;

View File

@ -21,12 +21,14 @@ module.exports = function(name, url) {
<button <button
class="btn rounded-lg w-full flex-no-shrink focus:outline" class="btn rounded-lg w-full flex-no-shrink focus:outline"
onclick="${copy}" onclick="${copy}"
title="${state.translate('copyUrlFormButton')}"
> >
${state.translate('copyUrlFormButton')} ${state.translate('copyUrlFormButton')}
</button> </button>
<button <button
class="text-blue-dark hover:text-blue-darker focus:text-blue-darker my-4 font-medium cursor-pointer focus:outline" class="text-blue-dark hover:text-blue-darker focus:text-blue-darker my-4 font-medium cursor-pointer focus:outline"
onclick="${close}" onclick="${close}"
title="${state.translate('okButton')}"
> >
${state.translate('okButton')} ${state.translate('okButton')}
</button> </button>

View File

@ -36,6 +36,7 @@ function password(state, emit) {
? 'bg-red hover:bg-red focus:bg-red' ? 'bg-red hover:bg-red focus:bg-red'
: ''}" : ''}"
value="${state.translate('unlockButtonLabel')}" value="${state.translate('unlockButtonLabel')}"
title="${state.translate('unlockButtonLabel')}"
/> />
</form> </form>
<label <label

View File

@ -5,7 +5,11 @@ module.exports = function(message) {
return html` return html`
<send-ok-dialog class="flex flex-col max-w-xs p-4"> <send-ok-dialog class="flex flex-col max-w-xs p-4">
<div class="text-center m-8 leading-normal">${message}</div> <div class="text-center m-8 leading-normal">${message}</div>
<button class="btn rounded-lg w-full flex-no-shrink" onclick="${close}"> <button
class="btn rounded-lg w-full flex-no-shrink"
onclick="${close}"
title="${state.translate('okButton')}"
>
${state.translate('okButton')} ${state.translate('okButton')}
</button> </button>
</send-ok-dialog> </send-ok-dialog>

View File

@ -30,6 +30,7 @@ module.exports = function(trigger) {
<input <input
class="btn rounded-lg w-full flex flex-no-shrink items-center justify-center" class="btn rounded-lg w-full flex flex-no-shrink items-center justify-center"
value="${state.translate('signInMenuOption')}" value="${state.translate('signInMenuOption')}"
title="${state.translate('signInMenuOption')}"
id="email-submit" id="email-submit"
type="submit" /> type="submit" />
</form> </form>

View File

@ -505,6 +505,7 @@ module.exports = {
height: { height: {
auto: 'auto', auto: 'auto',
px: '1px', px: '1px',
'0': '0',
'1': '0.25rem', '1': '0.25rem',
'2': '0.5rem', '2': '0.5rem',
'3': '0.75rem', '3': '0.75rem',