Move hide button to top of dialog

This commit is contained in:
Grant Moyer 2019-08-06 18:48:21 -04:00
parent ebcbe6496a
commit 9c8ebde19d
2 changed files with 14 additions and 25 deletions

View File

@ -5,11 +5,12 @@
width: 11em;
&__length-range {
}
&__btn-refresh {
&__top-btn {
float: right;
cursor: pointer;
position: relative;
top: 2px;
margin-left: 0.35em;
@include th {
color: th(muted-color);
&:hover { color: th(text-color); }
@ -27,11 +28,6 @@
margin-left: 15%;
}
}
&__result-wrap {
display: flex;
justify-content: center;
align-items: flex-start;
}
&__result {
@include user-select(text);
font-family: $monospace-font-family;
@ -47,19 +43,14 @@
}
}
#gen__check-hide {
$width: 1.3em;
& + label {
width: $width;
margin-right: -$width;
margin-top: 1.3ex;
margin-left: $small-spacing;
}
& + label:before {
@include fa-icon;
content: $fa-var-eye;
color: inherit;
}
&:checked + label:before {
content: $fa-var-eye-slash;
color: inherit;
}
}
&__btn-wrap {

View File

@ -1,6 +1,14 @@
<div class="gen">
<div>{{res 'genLen'}}: <span class="gen__length-range-val">{{opt.length}}</span>
<i class="fa fa-refresh gen__btn-refresh" title="{{res 'genNewPass'}}"></i>
<i class="fa fa-refresh gen__btn-refresh gen__top-btn" title="{{res 'genNewPass'}}"></i>
<input type="checkbox" id="gen__check-hide" {{#if hide}}checked{{/if}}>
<label for="gen__check-hide" class="fa gen__top-btn"
{{#if hide}}
title="{{res 'genShowPass'}}"
{{else}}
title="{{res 'genHidePass'}}"
{{/if}}
></label>
</div>
<select class="gen__sel-tpl input-base">
{{#each presets as |ps|}}
@ -25,16 +33,6 @@
<div class="gen__check"><input type="checkbox" id="gen__check-ambiguous"
data-id="ambiguous" {{#if opt.ambiguous}}checked{{/if}}><label for="gen__check-ambiguous">0Oo</label></div>
</div>
<div class="gen__result-wrap">
<div class="gen__result"></div>
<input type="checkbox" id="gen__check-hide" {{#if hide}}checked{{/if}}>
<label for="gen__check-hide"
{{#if hide}}
title="{{res 'genShowPass'}}"
{{else}}
title="{{res 'genHidePass'}}"
{{/if}}
></label>
</div>
<div class="gen__result"></div>
<div class="gen__btn-wrap"><button class="gen__btn-ok">{{btnTitle}}</button></div>
</div>