LupusNobilis
/
sogo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Report body inline style in Sass 

Create bottombar component
pull/91/head
iRouge 2015-01-21 13:16:33 -05:00 committed by Francis Lachapelle
parent 8e76c699dd
commit f4f53ec21e
14 changed files with 168 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
UI/Templates/UIxPageFrame.wox
View File

@ -40,8 +40,7 @@
</var:if-ie>
</head>
<!--FIXME : repport in-line styling in style definitions -->
<body style="overflow: hidden; padding-bottom:64px;" var:data-ng-app="angularModule" var:class="bodyClasses"
<body var:data-ng-app="angularModule" var:class="bodyClasses"
><var:if condition="isCompatibleBrowser"
><var:if condition="singleWindowModeEnabled"
><div id="popupFrame" style="display: none;"><iframe width="100%" height="100%" src="/SOGo/loading"><!-- space --></iframe></div></var:if
@ -65,7 +64,7 @@
<var:component-content/>
<!--FIXME : make sure the .md-button.md-default-theme[disabled] is "contrast aware" disabled labels are actualy almost invisible -->
<!--FIXME : repport in-line styling in style definitions -->
<md-toolbar layout="row" layout-align="center center" style="background-color:#212121; position: fixed; bottom: 0px; left: 0px; width: 100%; z-index: 100">
<md-toolbar class="sg-bottombar" layout="row" layout-align="center center">
<var:if condition="userHasCalendarAccess">
<var:if condition="isCalendar">
<md-button ng-disabled="true"><var:string label:value="Calendar" /></md-button>

74
UI/WebServerResources/css/styles.css
View File

@ -2336,6 +2336,80 @@ md-toolbar {
.md-toolbar-tools .md-button {
font-size: 14px; }
md-toolbar {
display: flex;
flex-direction: column;
position: relative;
z-index: 2;
font-size: 1.3em;
min-height: 64px;
width: 100%; }
md-toolbar.md-tall {
height: 128px;
min-height: 128px;
max-height: 128px; }
md-toolbar.md-medium-tall {
height: 88px;
min-height: 88px;
max-height: 88px; }
md-toolbar.md-medium-tall .md-toolbar-tools {
height: 48px;
min-height: 48px;
max-height: 48px; }
md-toolbar.md-toolbar-small {
min-height: 48px; }
md-toolbar .md-indent {
margin-left: 64px; }
.md-toolbar-tools {
display: flex;
align-items: center;
flex-direction: row;
width: 100%;
height: 64px;
min-height: 100%;
max-height: 64px;
font-size: inherit;
font-weight: normal;
padding: 0 16px;
margin: 0; }
.md-toolbar-tools > * {
font-size: inherit; }
.md-toolbar-tools h2, .md-toolbar-tools h3 {
font-weight: normal; }
.md-toolbar-tools a {
color: inherit;
text-decoration: none; }
.md-toolbar-tools .fill-height {
display: flex;
align-items: center; }
.md-toolbar-tools .md-tools {
margin-left: auto; }
.md-toolbar-tools .md-button {
font-size: 14px; }
.sg-bottombar {
@extends md-toolbar;
background-color: #212121;
position: fixed;
bottom: 0px;
left: 0px;
z-index: 100; }
/**
*
* @filename _base_styles.scss
* @project SOGo
* @version 3.alpha
*
* Define basic general styles for base elements
*
*
*/
body,
.main {
padding-bottom: 64px; }
/**
*
* This is the shame file (http://csswizardry.com/2013/04/shame-css/)

4
UI/WebServerResources/css/styles.css.map
View File

File diff suppressed because one or more lines are too long

22
UI/WebServerResources/scss/components/bottombar/_extends.scss 100644
View File

@ -0,0 +1,22 @@
///
///
/// @filename _extends.scss
/// @project SOGo
/// @version 3.alpha
/// @module bottombar
///
/// botttombar extends
///
///
.sg-bottombar {
@extends md-toolbar;
background-color:#212121; // fixme : use a variable
position: fixed;
bottom: 0px;
left: 0px;
// todo : implement a setting map and a getter for every z-index
// NiceToHave : implement init map and function
z-index: 100;
}

0
UI/WebServerResources/scss/core/_base_styles/_mixins.scss → UI/WebServerResources/scss/components/bottombar/_mixins.scss
View File

17
UI/WebServerResources/scss/components/bottombar/bottombar-theme.scss 100644
View File

@ -0,0 +1,17 @@
md-toolbar.md-THEME_NAME-theme {
background-color: '{{primary-color}}';
color: '{{primary-contrast}}';
.md-button {
color: '{{primary-contrast}}';
}
&.md-accent {
background-color: '{{accent-color}}';
color: '{{accent-contrast}}';
}
&.md-warn {
background-color: '{{warn-color}}';
color: '{{warn-contrast}}';
}
}

14
UI/WebServerResources/scss/components/bottombar/bottombar.scss 100644
View File

@ -0,0 +1,14 @@
///
///
/// @filename _bottombar.scss
/// @project SOGo
/// @version 3.alpha
///
/// Main botttombar module file define style for component bottombar, manly an extension of bottombar
///
///
@import 'components/toolbar/toolbar.scss'; // todo : remove when settings are done
@import "mixins";
@import "extends";
// -----------------------------------------

1
UI/WebServerResources/scss/components/toolbar/toolbar.scss
View File

@ -1,3 +1,4 @@
// fixme : place all variables in settings
$toolbar-tools-height: 64px !default;
$toolbar-height: 64px !default;
$toolbar-medium-tall-height: 88px !default;

16
UI/WebServerResources/scss/core/base_styles/_base_style.scss 100644
View File

@ -0,0 +1,16 @@
/**
*
* @filename _base_styles.scss
* @project SOGo
* @version 3.alpha
*
* Define basic general styles for base elements
*
*
*/
body,
.main { // see if '.main' fit the purposes
padding-bottom: $toolbar-height; // padding to compensate for the bottom bar
}

0
UI/WebServerResources/scss/core/_base_styles/_extends.scss → UI/WebServerResources/scss/core/base_styles/_extends.scss
View File

0
UI/WebServerResources/scss/core/_base_styles/_functions.scss → UI/WebServerResources/scss/core/base_styles/_functions.scss
View File

0
UI/WebServerResources/scss/core/_base_styles/_base_style.scss → UI/WebServerResources/scss/core/base_styles/_mixins.scss
View File

14
UI/WebServerResources/scss/grid/_manifest.scss
View File

@ -0,0 +1,14 @@
/**
*
* @filename _grid.scss
*
*
*
*
*
*
*
*
*
*
*/

6
UI/WebServerResources/scss/styles.scss
View File

@ -28,11 +28,13 @@
/* Local overrides from angular-material src */
// fixme : refactor all this to meet our practices
// ------------------------------------------------------------------------------
@import 'core/variables';
@import 'core/mixins';
@import 'core/structure';
@import 'core/layout';
// Icons -
// ------------------------------------------------------------------------------
// fixme : implement icon-font module
@ -48,7 +50,11 @@
@import 'components/list/list.scss';
@import 'components/divider/divider.scss';
@import 'components/toolbar/toolbar.scss';
@import 'components/bottombar/bottombar.scss';
// core styles - need to be after components till settings are correctly implemented
// ------------------------------------------------------------------------------
@import 'core/base_styles/base_style';
// Make sure this is last to override anything else
@import 'shame';