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

added dropdowns for mobile toolbar 

Conflicts:
	src/js/directives/common.js
This commit is contained in:
Mario Volke 2014-10-16 17:59:32 +02:00 committed by Tankred Hase
parent 06498017df
commit 2594ff515b
6 changed files with 145 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

226
src/js/directives/common.js
View File

@ -1,129 +1,143 @@
'use strict'; define(function(require) {
'use strict';
var ngModule = angular.module('woDirectives', []); var angular = require('angular');
ngModule.directive('woTouch', function($parse) { var ngModule = angular.module('woDirectives', []);
var className = 'wo-touch-active';
return function(scope, elm, attrs) { ngModule.directive('woTouch', function($parse) {
var handler = $parse(attrs.woTouch); var className = 'wo-touch-active';
elm.on('touchstart', function() { return function(scope, elm, attrs) {
elm.addClass(className); var handler = $parse(attrs.woTouch);
});
elm.on('touchleave touchcancel touchmove touchend', function() {
elm.removeClass(className);
});
elm.on('click', function(event) { elm.on('touchstart', function() {
elm.removeClass(className); elm.addClass(className);
scope.$apply(function() { });
handler(scope, { elm.on('touchleave touchcancel touchmove touchend', function() {
$event: event elm.removeClass(className);
});
elm.on('click', function(event) {
elm.removeClass(className);
scope.$apply(function() {
handler(scope, {
$event: event
});
}); });
}); });
}); };
}; });
});
ngModule.directive('woTooltip', function($document, $timeout) { ngModule.directive('woTooltip', function($document, $timeout) {
return function(scope, elm, attrs) { return function(scope, elm, attrs) {
var selector = attrs.woTooltip; var selector = attrs.woTooltip;
var tooltip = $document.find(selector); var tooltip = $document.find(selector);
elm.on('mouseover', function() { elm.on('mouseover', function() {
// Compute tooltip position // Compute tooltip position
var offsetElm = elm.offset(); var offsetElm = elm.offset();
var offsetTooltipParent = tooltip.offsetParent().offset(); var offsetTooltipParent = tooltip.offsetParent().offset();
// Set tooltip position // Set tooltip position
tooltip[0].style.top = (offsetElm.top - offsetTooltipParent.top + tooltip[0].style.top = (offsetElm.top - offsetTooltipParent.top +
elm[0].offsetHeight / 2 - tooltip[0].offsetHeight / 2) + 'px'; elm[0].offsetHeight / 2 - tooltip[0].offsetHeight / 2) + 'px';
tooltip[0].style.left = (offsetElm.left - offsetTooltipParent.left + tooltip[0].style.left = (offsetElm.left - offsetTooltipParent.left +
elm[0].offsetWidth) + 'px'; elm[0].offsetWidth) + 'px';
// Wait till browser repaint // Wait till browser repaint
$timeout(function() { $timeout(function() {
tooltip.addClass('tooltip--show'); tooltip.addClass('tooltip--show');
});
}); });
});
elm.on('mouseout', function() { elm.on('mouseout', function() {
tooltip.removeClass('tooltip--show'); tooltip.removeClass('tooltip--show');
tooltip[0].style.top = '-9999px'; tooltip[0].style.top = '-9999px';
tooltip[0].style.left = '-9999px'; tooltip[0].style.left = '-9999px';
}); });
}; };
}); });
ngModule.directive('woDropdown', function($document, $timeout) { ngModule.directive('woDropdown', function($document, $timeout) {
return function(scope, elm, attrs) { return function(scope, elm, attrs) {
var selector = attrs.woDropdown; var selector = attrs.woDropdown;
var position = attrs.woDropdownPosition; var position = (attrs.woDropdownPosition || '').split(' ');
var dropdown = $document.find(selector); var dropdown = $document.find(selector);
function appear() { function appear() {
// Compute dropdown position // Compute dropdown position
var offsetElm = elm.offset(); var offsetElm = elm.offset();
var offsetDropdownParent = dropdown.offsetParent().offset(); var offsetDropdownParent = dropdown.offsetParent().offset();
// Set dropdown position // Set dropdown position
dropdown[0].style.top = (offsetElm.top - offsetDropdownParent.top + switch(position[1]) {
elm[0].offsetHeight) + 'px'; case 'up':
switch (position) { dropdown[0].style.top = (offsetElm.top - offsetDropdownParent.top -
case 'center': dropdown[0].offsetHeight - 3) + 'px';
dropdown[0].style.left = (offsetElm.left - offsetDropdownParent.left + break;
default:
dropdown[0].style.top = (offsetElm.top - offsetDropdownParent.top +
elm[0].offsetHeight + 3) + 'px';
}
switch(position[0]) {
case 'center':
dropdown[0].style.left = (offsetElm.left - offsetDropdownParent.left +
elm[0].offsetWidth / 2 - dropdown[0].offsetWidth / 2) + 'px'; elm[0].offsetWidth / 2 - dropdown[0].offsetWidth / 2) + 'px';
break; break;
case 'right': case 'right':
dropdown[0].style.left = (offsetElm.left - offsetDropdownParent.left + dropdown[0].style.left = (offsetElm.left - offsetDropdownParent.left +
elm[0].offsetWidth - dropdown[0].offsetWidth) + 'px'; elm[0].offsetWidth - dropdown[0].offsetWidth) + 'px';
break; break;
default: default:
dropdown[0].style.left = (offsetElm.left - offsetDropdownParent.left) + 'px'; dropdown[0].style.left = (offsetElm.left - offsetDropdownParent.left) + 'px';
}
// Wait till browser repaint
$timeout(function() {
dropdown.addClass('dropdown--show');
});
// class on element to change style if drowdown is visible
elm.addClass('wo-dropdown-active');
} }
// Wait till browser repaint function disappear() {
$timeout(function() { dropdown.removeClass('dropdown--show');
dropdown.addClass('dropdown--show'); dropdown[0].style.top = '-9999px';
dropdown[0].style.left = '-9999px';
elm.removeClass('wo-dropdown-active');
}
function toggle() {
if(dropdown.hasClass('dropdown--show')) {
disappear();
}
else {
appear();
}
}
elm.on('touchstart click', toggle);
// close if user clicks outside of dropdown and elm
$document.on('touchstart.woDropdown click.woDropdown', function(e) {
var t = angular.element(e.target);
if(dropdown.hasClass('dropdown--show') &&
!t.closest(dropdown).length &&
!t.closest(elm).length) {
disappear();
}
}); });
// class on element to change style if drowdown is visible // remove event listener on document
elm.addClass('wo-dropdown-active'); scope.$on('$destroy', function() {
} $document.off('touchstart.woDropdown click.woDropdown');
});
};
});
function disappear() { return ngModule;
dropdown.removeClass('dropdown--show'); });
dropdown[0].style.top = '-9999px';
dropdown[0].style.left = '-9999px';
elm.removeClass('wo-dropdown-active');
}
function toggle() {
if (dropdown.hasClass('dropdown--show')) {
disappear();
} else {
appear();
}
}
elm.on('touchstart click', toggle);
// close if user clicks outside of dropdown and elm
$document.on('touchstart.woDropdown click.woDropdown', function(e) {
var t = angular.element(e.target);
if (!t.closest(dropdown).length &&
!t.closest(elm).length) {
disappear();
}
});
// remove event listener on document
scope.$on('$destroy', function() {
$document.off('touchstart.woDropdown click.woDropdown');
});
};
});
module.exports = ngModule;

2
src/sass/all.scss
View File

@ -16,7 +16,7 @@
// Utilities classes // Utilities classes
@import "mixins/responsive"; @import "utilities/responsive";
// Components (TODO: refactor to BEM) // Components (TODO: refactor to BEM)
@import "components/lightbox"; @import "components/lightbox";

2
src/sass/blocks/basics/_dropdown.scss
View File

@ -10,7 +10,7 @@
background: $color-bg; background: $color-bg;
color: $color-main; color: $color-main;
border: 1px solid $color-main; border: 1px solid $color-main;
margin: 2px 0 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
will-change: opacity, transform; will-change: opacity, transform;

3
src/sass/blocks/basics/_toolbar.scss
View File

@ -38,6 +38,9 @@
& > li { & > li {
flex-grow: 1; flex-grow: 1;
.btn-icon-light {
width: 100%;
}
} }
@include respond-to(md) { @include respond-to(md) {

14
src/sass/utilities/_responsive.scss
View File

@ -2,35 +2,35 @@
.u-visible-sm { .u-visible-sm {
@include respond-to(md) { @include respond-to(md) {
display: none; display: none !important;
} }
} }
.u-visible-md { .u-visible-md {
@include respond-to(sm-only) { @include respond-to(sm-only) {
display: none; display: none !important;
} }
@include respond-to(lg) { @include respond-to(lg) {
display: none; display: none !important;
} }
} }
.u-visible-lg { .u-visible-lg {
@include respond-to(not-lg) { @include respond-to(not-lg) {
display: none; display: none !important;
} }
} }
.u-hidden-sm { .u-hidden-sm {
@include respond-to(sm-only) { @include respond-to(sm-only) {
display: none; display: none !important;
} }
} }
.u-hidden-md { .u-hidden-md {
@include respond-to(md-only) { @include respond-to(md-only) {
display: none; display: none !important;
} }
} }
.u-hidden-lg { .u-hidden-lg {
@include respond-to(lg) { @include respond-to(lg) {
display: none; display: none !important;
} }
} }

16
src/tpl/read.html
View File

@ -23,7 +23,10 @@
</button> </button>
</li> </li>
<li> <li>
<button class="btn-icon-light" title="Move mail"> <button class="btn-icon-light u-visible-sm" title="Move mail" wo-dropdown="#read-dropdown-folder" wo-dropdown-position="center up">
<svg><use xlink:href="#icon-folder" /><title>Move mail</title></svg>
</button>
<button class="btn-icon-light u-hidden-sm" title="Move mail" wo-dropdown="#read-dropdown-folder" wo-dropdown-position="center">
<svg><use xlink:href="#icon-folder" /><title>Move mail</title></svg> <svg><use xlink:href="#icon-folder" /><title>Move mail</title></svg>
</button> </button>
</li> </li>
@ -33,7 +36,10 @@
</button> </button>
</li> </li>
<li> <li>
<button class="btn-icon-light" title="Reply to" wo-dropdown="#reply-selection" wo-dropdown-position="center"> <button class="btn-icon-light u-visible-sm" title="Reply to" wo-dropdown="#read-reply-selection" wo-dropdown-position="center up">
<svg><use xlink:href="#icon-reply_light" /><title>Reply to</title></svg>
</button>
<button class="btn-icon-light u-hidden-sm" title="Reply to" wo-dropdown="#read-reply-selection" wo-dropdown-position="center">
<svg><use xlink:href="#icon-reply_light" /><title>Reply to</title></svg> <svg><use xlink:href="#icon-reply_light" /><title>Reply to</title></svg>
</button> </button>
</li> </li>
@ -142,10 +148,14 @@
</div> </div>
<!-- dropdowns --> <!-- dropdowns -->
<ul id="reply-selection" class="dropdown"> <ul id="read-reply-selection" class="dropdown">
<li><button wo-touch="state.writer.write(state.mailList.selected)"><svg><use xlink:href="#icon-reply_light" /></svg> Reply</button></li> <li><button wo-touch="state.writer.write(state.mailList.selected)"><svg><use xlink:href="#icon-reply_light" /></svg> Reply</button></li>
<li><button wo-touch="state.writer.write(state.mailList.selected, true)"><svg><use xlink:href="#icon-reply_all_light" /></svg> Reply All</button></li> <li><button wo-touch="state.writer.write(state.mailList.selected, true)"><svg><use xlink:href="#icon-reply_all_light" /></svg> Reply All</button></li>
<li><button wo-touch="state.writer.write(state.mailList.selected, null, true)"><svg><use xlink:href="#icon-forward_light" /></svg> Forward</button></li> <li><button wo-touch="state.writer.write(state.mailList.selected, null, true)"><svg><use xlink:href="#icon-forward_light" /></svg> Forward</button></li>
</ul> </ul>
<ul id="read-dropdown-folder" class="dropdown">
<li><button><svg><use xlink:href="#icon-folder" /></svg> Lorem</button></li>
<li><button><svg><use xlink:href="#icon-folder" /></svg> Ipsum</button></li>
</ul>
</div> </div>