keeweb
/
keeweb
mirror of https://github.com/keeweb/keeweb.git
1
0
Fork 0
Code Issues Releases Wiki Activity

footer tips

This commit is contained in:
Antelle 2016-02-04 22:38:57 +03:00
parent f0d4125c97
commit d0182a65f8
4 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/scripts/util/locale.js
View File

@ -43,6 +43,10 @@ var Locale = {
footerOpen: 'Open / New',
footerSyncError: 'Sync error',
footerTitleHelp: 'Help',
footerTitleSettings: 'Settings',
footerTitleGen: 'Generate',
footerTitleLock: 'Lock',
genLen: 'Length',
grpTitle: 'Group',

5
app/scripts/util/tip.js
View File

@ -44,11 +44,16 @@ Tip.prototype.show = function() {
}
var top, left;
var offset = 10;
var sideOffset = 10;
switch (placement) {
case 'top':
top = rect.top - tipRect.height - offset;
left = rect.left + rect.width / 2 - tipRect.width / 2;
break;
case 'top-left':
top = rect.top - tipRect.height - offset;
left = rect.left + rect.width / 2 - tipRect.width + sideOffset;
break;
case 'bottom':
top = rect.bottom + offset;
left = rect.left + rect.width / 2 - tipRect.width / 2;

12
app/styles/common/_tip.scss
View File

@ -27,6 +27,8 @@
$arrow-size-small: 10px 8px;
$arrow-size-large: 12px 9px;
$arrow-offset-small: 10px;
$arrow-offset-large: 11px;
&.tip--bottom:after {
@include position(absolute, - nth($arrow-size-small, 2) null null 50%);
@ -38,6 +40,11 @@
@include transform(translate(-50%, 0));
@include th { @include triangle($arrow-size-small, background-color(), down); }
}
&.tip--top-left:after {
@include position(absolute, 100% null null calc(100% - #{$arrow-offset-small}));
@include transform(translate(-50%, 0));
@include th { @include triangle($arrow-size-small, background-color(), down); }
}
&.tip--left:after {
@include position(absolute, 50% null null 100%);
@include transform(translate(0, -50%));
@ -59,6 +66,11 @@
@include transform(translate(-50%, 0));
@include th { @include triangle($arrow-size-large, light-border-color(), down); }
}
&.tip--top-left:before {
@include position(absolute, 100% null null calc(100% - #{$arrow-offset-small}));
@include transform(translate(-50%, 0));
@include th { @include triangle($arrow-size-large, light-border-color(), down); }
}
&.tip--left:before {
@include position(absolute, 50% null null 100%);
@include transform(translate(0, -50%));

8
app/templates/footer.hbs
View File

@ -13,14 +13,14 @@
</div>
{{/each}}
<div class="footer__db footer__db--dimmed footer__db--expanded footer__db-open"><i class="fa fa-plus"></i> {{res 'footerOpen'}}</div>
<div class="footer__btn footer__btn-help"><i class="fa fa-question"></i></div>
<div class="footer__btn footer__btn-settings">
<div class="footer__btn footer__btn-help" title="{{res 'footerTitleHelp'}}" tip-placement="top"><i class="fa fa-question"></i></div>
<div class="footer__btn footer__btn-settings" title="{{res 'footerTitleSettings'}}" tip-placement="top">
{{#if updateAvailable}}
<i class="fa fa-bell footer__update-icon"></i>
{{else}}
<i class="fa fa-cog"></i>
{{/if}}
</div>
<div class="footer__btn footer__btn-generate"><i class="fa fa-bolt"></i></div>
<div class="footer__btn footer__btn-lock"><i class="fa fa-lock"></i></div>
<div class="footer__btn footer__btn-generate" title="{{res 'footerTitleGen'}}" tip-placement="top"><i class="fa fa-bolt"></i></div>
<div class="footer__btn footer__btn-lock" title="{{res 'footerTitleLock'}}" tip-placement="top-left"><i class="fa fa-sign-out"></i></div>
</div>