(css) Keep the fab button visible
Francis Lachapelle
parent
4db1f8185a
commit
d90533399d
1
NEWS
1
NEWS
|
|
@ -9,6 +9,7 @@ Bug fixes
|
|||
- [web] ignore mouse events in scrollbars of Month view (#3990)
|
||||
- [web] fixed public URL with special characters (#3993)
|
||||
- [eas] improved EAS parameters parsing (#4003)
|
||||
- [web] keep the fab button visible when the center list is hidden
|
||||
|
||||
3.2.6a (2017-01-26)
|
||||
-------------------
|
||||
|
|
|
|||
|
|
@ -501,33 +501,35 @@
|
|||
md-mode="indeterminate"
|
||||
md-diameter="32"><!-- progress --></md-progress-circular>
|
||||
</div>
|
||||
<md-fab-speed-dial
|
||||
class="md-scale md-fab-bottom-right"
|
||||
ng-cloak="ng-cloak"
|
||||
md-direction="up"
|
||||
ng-show="addressbook.selectedFolder.isOwned || addressbook.selectedFolder.acls.objectCreator">
|
||||
<md-fab-trigger>
|
||||
<md-button class="md-fab md-accent" label:aria-label="New Contact">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
</md-fab-trigger>
|
||||
<md-fab-actions>
|
||||
<md-button var:aria-label="Contact" class="md-fab md-raised md-mini"
|
||||
ng-click="addressbook.newComponent('card')">
|
||||
<md-tooltip md-direction="left"><var:string label:value="Create a new address book card"/></md-tooltip>
|
||||
<md-icon>person</md-icon>
|
||||
</md-button>
|
||||
<md-button var:aria-label="List" class="md-fab md-raised md-mini"
|
||||
ng-hide="addressbook.selectedFolder.isRemote"
|
||||
ng-click="addressbook.newComponent('list')">
|
||||
<md-tooltip md-direction="left"><var:string label:value="Create a new list"/></md-tooltip>
|
||||
<md-icon>group</md-icon>
|
||||
</md-button>
|
||||
</md-fab-actions>
|
||||
</md-fab-speed-dial>
|
||||
</md-content>
|
||||
</div>
|
||||
|
||||
<md-fab-speed-dial
|
||||
class="md-scale sg-fab-bottom-center"
|
||||
ng-cloak="ng-cloak"
|
||||
ng-class="{ 'sg-sidenav-close': leftIsClose, 'sg-center-close': centerIsClose }"
|
||||
md-direction="up"
|
||||
ng-show="addressbook.selectedFolder.isOwned || addressbook.selectedFolder.acls.objectCreator">
|
||||
<md-fab-trigger>
|
||||
<md-button class="md-fab md-accent" label:aria-label="New Contact">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
</md-fab-trigger>
|
||||
<md-fab-actions>
|
||||
<md-button var:aria-label="Contact" class="md-fab md-raised md-mini"
|
||||
ng-click="addressbook.newComponent('card')">
|
||||
<md-tooltip md-direction="left"><var:string label:value="Create a new address book card"/></md-tooltip>
|
||||
<md-icon>person</md-icon>
|
||||
</md-button>
|
||||
<md-button var:aria-label="List" class="md-fab md-raised md-mini"
|
||||
ng-hide="addressbook.selectedFolder.isRemote"
|
||||
ng-click="addressbook.newComponent('list')">
|
||||
<md-tooltip md-direction="left"><var:string label:value="Create a new list"/></md-tooltip>
|
||||
<md-icon>group</md-icon>
|
||||
</md-button>
|
||||
</md-fab-actions>
|
||||
</md-fab-speed-dial>
|
||||
|
||||
<div id="detailView" class="view-detail"
|
||||
layout="column" layout-align="start center"
|
||||
ng-class="{ 'sg-close': !addressbook.selectedFolder.selectedCard }"
|
||||
|
|
|
|||
|
|
@ -331,36 +331,33 @@
|
|||
md-mode="indeterminate"
|
||||
md-diameter="32"><!-- mailbox loading progress --></md-progress-circular>
|
||||
</div>
|
||||
<md-button class="md-fab md-fab-bottom-right md-accent"
|
||||
label:aria-label="Write a new message"
|
||||
ng-click="mailbox.newMessage($event)">
|
||||
<md-icon>edit</md-icon>
|
||||
</md-button>
|
||||
<md-fab-speed-dial
|
||||
class="md-scale md-fab-bottom-right"
|
||||
ng-cloak="ng-cloak"
|
||||
md-direction="up">
|
||||
<md-fab-trigger>
|
||||
<md-button class="md-fab md-accent" label:aria-label="Write a new message">
|
||||
<md-icon>edit</md-icon>
|
||||
</md-button>
|
||||
</md-fab-trigger>
|
||||
<md-fab-actions>
|
||||
<md-button class="md-fab md-raised md-mini" var:aria-label="Write a new message"
|
||||
ng-click="mailbox.newMessage($event)">
|
||||
<md-tooltip md-direction="left"><var:string label:value="Write a new message"/></md-tooltip>
|
||||
<md-icon>open_in_browser</md-icon>
|
||||
</md-button>
|
||||
<md-button class="md-fab md-raised md-mini" var:aria-label="Write a message in new window"
|
||||
ng-click="mailbox.newMessage($event, true)">
|
||||
<md-tooltip md-direction="left"><var:string label:value="Write a message in new window"/></md-tooltip>
|
||||
<md-icon>open_in_new</md-icon>
|
||||
</md-button>
|
||||
</md-fab-actions>
|
||||
</md-fab-speed-dial>
|
||||
</md-content>
|
||||
</div>
|
||||
|
||||
<md-fab-speed-dial
|
||||
class="md-scale sg-fab-bottom-center"
|
||||
ng-cloak="ng-cloak"
|
||||
ng-class="{ 'sg-sidenav-close': leftIsClose, 'sg-center-close': centerIsClose }"
|
||||
md-direction="up">
|
||||
<md-fab-trigger>
|
||||
<md-button class="md-fab md-accent" label:aria-label="Write a new message">
|
||||
<md-icon>edit</md-icon>
|
||||
</md-button>
|
||||
</md-fab-trigger>
|
||||
<md-fab-actions>
|
||||
<md-button class="md-fab md-raised md-mini" var:aria-label="Write a new message"
|
||||
ng-click="mailbox.newMessage($event)">
|
||||
<md-tooltip md-direction="left"><var:string label:value="Write a new message"/></md-tooltip>
|
||||
<md-icon>open_in_browser</md-icon>
|
||||
</md-button>
|
||||
<md-button class="md-fab md-raised md-mini" var:aria-label="Write a message in new window"
|
||||
ng-click="mailbox.newMessage($event, true)">
|
||||
<md-tooltip md-direction="left"><var:string label:value="Write a message in new window"/></md-tooltip>
|
||||
<md-icon>open_in_new</md-icon>
|
||||
</md-button>
|
||||
</md-fab-actions>
|
||||
</md-fab-speed-dial>
|
||||
|
||||
<div id="detailView" class="view-detail"
|
||||
layout="column" layout-align="start center"
|
||||
ng-class="{ 'sg-close': !mailbox.service.selectedFolder.hasSelectedMessage() }"
|
||||
|
|
|
|||
|
|
@ -677,29 +677,32 @@
|
|||
md-mode="indeterminate"
|
||||
md-diameter="32"><!-- mailbox loading progress --></md-progress-circular>
|
||||
</div>
|
||||
<md-fab-speed-dial
|
||||
class="md-scale md-fab-bottom-right"
|
||||
ng-cloak="ng-cloak"
|
||||
md-direction="up">
|
||||
<md-fab-trigger>
|
||||
<md-button class="md-fab md-accent" label:aria-label="New Event">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
</md-fab-trigger>
|
||||
<md-fab-actions>
|
||||
<md-button var:aria-label="Create a new event" class="md-fab md-raised md-mini"
|
||||
ng-click="list.newComponent($event, 'appointment')">
|
||||
<md-tooltip md-direction="left"><var:string label:value="Create a new event"/></md-tooltip>
|
||||
<md-icon>event</md-icon>
|
||||
</md-button>
|
||||
<md-button var:aria-label="Create a new task" class="md-fab md-raised md-mini"
|
||||
ng-click="list.newComponent($event, 'task')">
|
||||
<md-tooltip md-direction="left"><var:string label:value="Create a new task"/></md-tooltip>
|
||||
<md-icon>assignment_turned_in</md-icon>
|
||||
</md-button>
|
||||
</md-fab-actions>
|
||||
</md-fab-speed-dial>
|
||||
</div>
|
||||
|
||||
<md-fab-speed-dial
|
||||
class="md-scale sg-fab-bottom-center"
|
||||
ng-class="{ 'sg-sidenav-close': leftIsClose, 'sg-center-close': centerIsClose }"
|
||||
ng-cloak="ng-cloak"
|
||||
md-direction="up">
|
||||
<md-fab-trigger>
|
||||
<md-button class="md-fab md-accent" label:aria-label="New Event">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
</md-fab-trigger>
|
||||
<md-fab-actions>
|
||||
<md-button var:aria-label="Create a new event" class="md-fab md-raised md-mini"
|
||||
ng-click="list.newComponent($event, 'appointment')">
|
||||
<md-tooltip md-direction="left"><var:string label:value="Create a new event"/></md-tooltip>
|
||||
<md-icon>event</md-icon>
|
||||
</md-button>
|
||||
<md-button var:aria-label="Create a new task" class="md-fab md-raised md-mini"
|
||||
ng-click="list.newComponent($event, 'task')">
|
||||
<md-tooltip md-direction="left"><var:string label:value="Create a new task"/></md-tooltip>
|
||||
<md-icon>assignment_turned_in</md-icon>
|
||||
</md-button>
|
||||
</md-fab-actions>
|
||||
</md-fab-speed-dial>
|
||||
|
||||
<div id="detailView" class="view-detail hide show-gt-xs"
|
||||
layout="column"
|
||||
md-colors="::{backgroundColor: 'default-background-200'}"
|
||||
|
|
|
|||
|
|
@ -5,10 +5,83 @@ md-sidenav md-list .md-button {
|
|||
font-weight: normal;
|
||||
}
|
||||
|
||||
.md-button.md-fab-overlap-bottom {
|
||||
&.md-fab-bottom-right,
|
||||
&.md-fab-bottom-left {
|
||||
bottom: -(($button-fab-width + $button-fab-padding)/2);
|
||||
/**
|
||||
* Keep main fab button visible and either at the bottom right of the list
|
||||
* view or at the bottom left of the detail view
|
||||
*
|
||||
* Three-pane view (full view):
|
||||
*
|
||||
* +------+-------+--------------+
|
||||
* | x | | x |
|
||||
* | | | |
|
||||
* | | | |
|
||||
* | | | |
|
||||
* | | (*)| |
|
||||
* +------+-------+--------------+
|
||||
*
|
||||
* Sidenav closed:
|
||||
*
|
||||
* +-------+--------------+
|
||||
* |= | x |
|
||||
* | | |
|
||||
* | | |
|
||||
* | | |
|
||||
* | (*)| |
|
||||
* +-------+--------------+
|
||||
*
|
||||
* Detail view expanded (list view closed):
|
||||
*
|
||||
* +------+--------------+
|
||||
* | x | + |
|
||||
* | | |
|
||||
* | | |
|
||||
* | | |
|
||||
* | |(*) |
|
||||
* +------+--------------+
|
||||
*
|
||||
* Sidenav closed and detail view expanded:
|
||||
*
|
||||
* +--------------+
|
||||
* | + |
|
||||
* | |
|
||||
* | |
|
||||
* | |
|
||||
* |(*) |
|
||||
* +--------------+
|
||||
*
|
||||
*/
|
||||
md-fab-speed-dial.sg-fab-bottom-center {
|
||||
position: absolute;
|
||||
bottom: ($button-fab-height - $button-fab-padding)/2;
|
||||
left: auto;
|
||||
right: ($button-fab-width - $button-fab-padding)/2;
|
||||
top: auto;
|
||||
transition: $swift-ease-out;
|
||||
@include at(sm) {
|
||||
right: col-width($breakpoint: sm, $nb: 10) + 2vw;
|
||||
&.sg-center-close {
|
||||
left: ($button-fab-width - $button-fab-padding)/2;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
@include at(md) {
|
||||
// sidenav is hidden, center list can be closed
|
||||
right: col-width($breakpoint: md, $nb: 14) + 2vw;
|
||||
&.sg-center-close {
|
||||
left: ($button-fab-width - $button-fab-padding)/2;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
@include from(lg) {
|
||||
// both sidenav and center list can be closed
|
||||
right: col-width($breakpoint: lg, $nb: 10) + 2vw;
|
||||
&.sg-sidenav-close, &.sg-center-close {
|
||||
right: col-width($breakpoint: lg, $nb: 14) + 2vw;
|
||||
}
|
||||
&.sg-sidenav-close.sg-center-close {
|
||||
left: ($button-fab-width - $button-fab-padding)/2;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -163,4 +236,4 @@ md-tab-content {
|
|||
font-weight: $sg-font-medium;
|
||||
line-height: $sg-font-size-1 * 2;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -160,14 +160,22 @@
|
|||
//@include responsive-columns('md', 'at');
|
||||
//@include responsive-columns('lg', 'from');
|
||||
|
||||
// Utility to implement a specific one without extending
|
||||
// todo: include error handling
|
||||
|
||||
@mixin flex-col($breakpoint, $nb, $grow: 1, $shrink: 1) {
|
||||
/**
|
||||
* Return a column width according to a breakpoint grid
|
||||
*/
|
||||
@function col-width($breakpoint, $nb) {
|
||||
$cols: map-get($base-grid-total-columns, $breakpoint);
|
||||
$colWidth: ((100 / $cols) * 1vw);
|
||||
max-width: ($colWidth * $nb);
|
||||
flex: $grow $shrink ($colWidth * $nb);
|
||||
@return ((100 / $cols) * $nb * 1vw);
|
||||
}
|
||||
|
||||
/**
|
||||
* Style a column according to a breakpoint grid
|
||||
*/
|
||||
@mixin flex-col($breakpoint, $nb, $grow: 1, $shrink: 1) {
|
||||
$cols: map-get($base-grid-total-columns, $breakpoint);
|
||||
$colWidth: ((100 / $cols) * 1vw);
|
||||
max-width: ($colWidth * $nb);
|
||||
flex: $grow $shrink ($colWidth * $nb);
|
||||
}
|
||||
|
||||
// Rows are included in padded containers, margins are used for vertical spacing
|
||||
|
|
|
|||
|
|
@ -64,20 +64,20 @@ $touch-zone: $touch-zone-width;
|
|||
|
||||
/**
|
||||
* Breakpoint: 0 600px 960px 1024px 1280px
|
||||
* ├───────────────────┼─────────┼─────────┼───────────┼─────────>
|
||||
* Slice : xs · sm · md · lg . xl
|
||||
* |----------------------|----------|----------|-------------|---------->
|
||||
* Slice : . xs · sm · md · lg . xl
|
||||
* · · · · ·
|
||||
* · · · at(md) · ·
|
||||
* · · ├─────────┤ ·
|
||||
* · · |----------| ·
|
||||
* · · · · ·
|
||||
* · · · from(md) · ·
|
||||
* · · ├───────────────────────────────>
|
||||
* · · · ·
|
||||
* · · to(md) · ·
|
||||
* ├─────────────────────────────────────────┤ ·
|
||||
* · ·
|
||||
* · between(sm, lg) ·
|
||||
* ├───────────────────────────────┤
|
||||
* · · |----------------------------------->
|
||||
* · · . · ·
|
||||
* · · . to(md) · ·
|
||||
* |--------------------------------------------| ·
|
||||
* . · . . ·
|
||||
* . · between(sm, lg) ·
|
||||
* . |-----------------------------------|
|
||||
*/
|
||||
|
||||
$layout-breakpoint-xs: 600px !default;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,8 @@ $quarter_height: 10px;
|
|||
[ui-view=calendars] {
|
||||
|
||||
// Decrease width of middle column (list of events and tasks)
|
||||
$listView-width: grid-step(4) !global;
|
||||
//$listView-width: grid-step(4) !global;
|
||||
$listView-width: grid-step(4);
|
||||
//$detailView-width: grid-step(10) !global;
|
||||
|
||||
.view-list {
|
||||
|
|
@ -39,9 +40,37 @@ $quarter_height: 10px;
|
|||
|
||||
.view-list--close {
|
||||
@include from(md) {
|
||||
$cols: map-get($base-grid-total-columns, md);
|
||||
$colWidth: ((100 / $cols) * -5vw);
|
||||
margin-right: $colWidth;
|
||||
$colWidth: col-width($breakpoint: md, $nb: 5);
|
||||
margin-right: $colWidth * -1;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Redefine fab button since center column width is different.
|
||||
* See button.scss
|
||||
*/
|
||||
md-fab-speed-dial.sg-fab-bottom-center {
|
||||
@include at(md) {
|
||||
// sidenav is hidden, center list can be closed
|
||||
right: col-width($breakpoint: md, $nb: 15) + 2vw;
|
||||
&.sg-center-close {
|
||||
left: ($button-fab-width - $button-fab-padding)/2;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
@include from(lg) {
|
||||
// both sidenav and center list can be closed
|
||||
right: col-width($breakpoint: lg, $nb: 11) + 2vw;
|
||||
&.sg-sidenav-close {
|
||||
right: col-width($breakpoint: lg, $nb: 15) + 2vw;
|
||||
}
|
||||
&.sg-center-close {
|
||||
right: col-width($breakpoint: lg, $nb: 14) + 2vw;
|
||||
}
|
||||
&.sg-sidenav-close.sg-center-close {
|
||||
left: ($button-fab-width - $button-fab-padding)/2;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ body {
|
|||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Variables
|
||||
$listView-width: grid-step(6) !global;
|
||||
//$listView-width: grid-step(6) !global;
|
||||
//$detailView-width: grid-step(8) !global;
|
||||
|
||||
[class|="view"] {
|
||||
|
|
@ -93,14 +93,12 @@ $listView-width: grid-step(6) !global;
|
|||
transform: translateX(-100%);
|
||||
|
||||
@include at(sm) {
|
||||
$cols: map-get($base-grid-total-columns, sm);
|
||||
$colWidth: ((100 / $cols) * -6vw);
|
||||
margin-right: $colWidth;
|
||||
$colWidth: col-width($breakpoint: sm, $nb: 6);
|
||||
margin-right: $colWidth * -1;
|
||||
}
|
||||
@include from(md) {
|
||||
$cols: map-get($base-grid-total-columns, md);
|
||||
$colWidth: ((100 / $cols) * -6vw);
|
||||
margin-right: $colWidth;
|
||||
$colWidth: col-width($breakpoint: md, $nb: 6);
|
||||
margin-right: $colWidth * -1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue