amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-06-04 01:49:44 +00:00
Code Issues Projects Releases Wiki Activity

(css) Keep the fab button visible

Browse Source
This commit is contained in:
Francis Lachapelle
2017-02-01 21:32:16 -05:00
parent 4db1f8185a
commit d90533399d
9 changed files with 217 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
UI/WebServerResources/scss/components/button/button.scss
+78 -5
View File
@@ -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;
}
}
UI/WebServerResources/scss/core/layout.scss
+15 -7
View File
@@ -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
UI/WebServerResources/scss/core/variables.scss
+10 -10
View File
@@ -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;
UI/WebServerResources/scss/views/SchedulerUI.scss
+33 -4
View File
@@ -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;
}
}
}
UI/WebServerResources/scss/views/_view.scss
+5 -7
View File
@@ -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;
}
}