amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-05-29 15:15:37 +00:00
Code Issues Projects Releases Wiki Activity

Improve toolbars on small screens

Browse Source 
- normalized toolbars in message viewer, contact viewer and contact
  editor;
- lower width of sidenav on medium screens;
- reworked display of message headers
This commit is contained in:
Francis Lachapelle
2015-09-03 16:10:05 -04:00
parent 3647f066da
commit d72188e2da
18 changed files with 812 additions and 784 deletions
Download Patch File Download Diff File Expand all files Collapse all files
UI/WebServerResources/scss/components/button/button.scss
+1 -1
View File
@@ -108,7 +108,7 @@ md-list md-list-item button.md-button.sg-icon-button {
.sg-icon-bar--vertical {
display: flex;
flex-direction: column;
margin: 0 ($mg * -1) 0 $mg;
//margin: 0 ($mg * -1) 0 $mg;
font-size: $sg-font-size-3;
align-items: center;
// Containers have padding, we compensate to align according to specs
UI/WebServerResources/scss/components/icon/icon.scss
+8 -8
View File
@@ -123,11 +123,11 @@ md-icon {
}
// Message flag
.sg-msg-flag {
md-icon {
color: sg-color($sogoGreen, 50) !important;
&.flagged {
color: sg-color($sogoBlue, 600) !important;
}
}
}
//.sg-msg-flag {
// md-icon {
// color: sg-color($sogoGreen, 50) !important;
// &.flagged {
// color: sg-color($sogoBlue, 600) !important;
// }
// }
//}
UI/WebServerResources/scss/components/list/list.scss
+4 -1
View File
@@ -45,8 +45,11 @@ md-list-item {
padding: $layout-gutter-width;
width: $sg-md-grid-pitch + $baseline-grid;
height: $sg-md-grid-pitch + $baseline-grid;
line-height: $sg-md-grid-pitch + $baseline-grid;
//line-height: $sg-md-grid-pitch + $baseline-grid;
background-clip: content-box;
md-icon {
font-size: $sg-md-grid-pitch + $baseline-grid - 2 * $layout-gutter-width;
}
}
.md-tile-right {
margin-right: -$layout-gutter-width;
UI/WebServerResources/scss/components/toolbar/toolbar.scss
+27 -8
View File
@@ -1,7 +1,7 @@
/// toolbar.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
$toolbar-tools-height: 100%;
//$toolbar-tools-height: 100%;
$toolbar-height: $pitch;
$toolbar-medium-tall-height: 88px !default;
//$toolbar-medium-tall-height: 88px !default;
$toolbar-tall-height: ($toolbar-height * 2);
$toolbar-indent-margin: $pitch;
$toolbar-padding: $mg;
@@ -18,18 +18,34 @@ md-toolbar {
font-size: 1em !important;
background-image: url("../img/felt-transp.png");
background-blend-mode: luminosity;
box-shadow: $whiteframe-shadow-z1;
//box-shadow: $whiteframe-shadow-z1;
}
.md-toolbar-tools {
padding: 0;
//padding: 0;
// dirty fix to override angular-material botchy typography
font-size: 1em !important;
}
md-toolbar,
.md-toolbar-tools {
// Animate the first icon button of a "secondary" toolbar
&.sg-toolbar-secondary {
> .md-toolbar-tools > .sg-icon-button:first-child,
> .sg-icon-button:first-child {
transition: $swift-ease-in;
transform: translateX(0px);
}
&.ng-hide > .md-toolbar-tools > .sg-icon-button:first-child,
&.ng-hide > .sg-icon-button:first-child {
transform: translateX(-$touch-zone-width);
}
}
}
// angular-material is overspecifying so we are
.md-toolbar-tools[layout-align="start start"] {
align-items: flex-start;
//align-items: flex-start;
}
.md-toolbar-tools.md-toolbar-tools-top {
@@ -50,14 +66,14 @@ header {
}
hgroup {
align-items: center;
flex: 1 1 auto;
//flex: 1 1 auto;
&h3 {
margin-bottom: 0;
}
}
.toolbar-main .md-button {
color: inherit;
font-size: sg-size(headline);
// color: inherit;
// font-size: sg-size(headline);
}
.sg-toolbar-group {
@@ -65,6 +81,9 @@ hgroup {
flex-direction: row;
align-items: center;
justify-content: space-between;
// & > .sg-icon-button:first-child {
// padding-left: 0;
// }
&-1 {
order: 1;
max-width: $listView-width;