mirror of
https://github.com/inverse-inc/sogo.git
synced 2026-07-05 16:35:10 +00:00
define base theme : add palette definitions to module initialization
This commit is contained in:
iRouge
committed by
Francis Lachapelle
Francis Lachapelle
parent
ee4c1c0706
commit
1a7bfee6b6
@@ -24,10 +24,10 @@
|
||||
<i class = "icon-undo"><!-- reset --></i>
|
||||
<var:string label:value = "Reset" />
|
||||
</span>
|
||||
<button class = "button tiny radius" type = "submit">
|
||||
<md-button class = "button tiny radius" type = "submit">
|
||||
<i class = "icon-checkmark"><!-- save --></i>
|
||||
<var:string label:value = "Save" />
|
||||
</button>
|
||||
</md-button>
|
||||
</div>
|
||||
<md-input-container>
|
||||
<div class = "action">
|
||||
|
||||
@@ -262,7 +262,7 @@
|
||||
<span class = "md-flex">{{activeUser.identification}}</span>
|
||||
</h2>
|
||||
</md-toolbar>
|
||||
<md-content md-scroll-y = "md-scroll-y" class = "md-padding" ng-controller = "LeftCtrl">
|
||||
<md-content md-scroll-y = "md-scroll-y" class = "md-padding" ng-controller = "LeftCtrl" flex="1 1 100%">
|
||||
<md-button ng-click = "close()" class = "md-primary" hide-gt-md = "hide-gt-md">Close</md-button>
|
||||
<md-list ng-repeat = "account in accounts track by account.id">
|
||||
<md-item>
|
||||
|
||||
@@ -27,7 +27,6 @@
|
||||
<link rel = "shortcut icon" var:href = "siteFavicon" type = "image/x-icon" />
|
||||
<link type = "text/css" rel = "stylesheet" rsrc:href = "css/icons.css" />
|
||||
<link type = "text/css" rel = "stylesheet" rsrc:href = "css/angular-material.css" />
|
||||
<link type = "text/css" rel = "stylesheet" rsrc:href = "css/themes/grey-theme.css" />
|
||||
<link type = "text/css" rel = "stylesheet" rsrc:href = "css/styles.css" />
|
||||
<var:if condition = "hasPageSpecificCSS"
|
||||
>
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -13,9 +13,26 @@
|
||||
angular.module('SOGo.UI', ['ngMaterial'])
|
||||
|
||||
.config(function ($mdThemingProvider) {
|
||||
// sogo-green extends the green palette, we put the extend in a var
|
||||
// to use it in a custom named paelette
|
||||
var sogoGreenSwatch = $mdThemingProvider.extendPalette('green', {
|
||||
// The default red paletette for warn-color
|
||||
$mdThemingProvider.definePalette('red', {
|
||||
'50': '#ffebee',
|
||||
'100': '#ffcdd2',
|
||||
'200': '#ef9a9a',
|
||||
'300': '#e57373',
|
||||
'400': '#ef5350',
|
||||
'500': '#f44336',
|
||||
'600': '#e53935',
|
||||
'700': '#d32f2f',
|
||||
'800': '#c62828',
|
||||
'900': '#b71c1c',
|
||||
'A100': '#ff8a80',
|
||||
'A200': '#ff5252',
|
||||
'A400': '#ff1744',
|
||||
'A700': '#d50000',
|
||||
'contrastDefaultColor': 'light',
|
||||
'contrastDarkColors': '50 100 200 300 400 A100'
|
||||
});
|
||||
$mdThemingProvider.definePalette('sogo-green', {
|
||||
'50': 'eaf5e9',
|
||||
'100': 'cbe5c8',
|
||||
'200': 'aad6a5',
|
||||
@@ -25,23 +42,14 @@
|
||||
'600': '4da143',
|
||||
'700': '388e3c',
|
||||
'800': '367d2e',
|
||||
'900': '225e1b'
|
||||
});
|
||||
var paperSwatch = $mdThemingProvider.extendPalette('grey', {
|
||||
'50': 'fcf7f8',
|
||||
'100': 'f7f1dc',
|
||||
'200': 'ede5ca',
|
||||
'300': 'e6d8ba',
|
||||
'400': 'e2d2a3',
|
||||
'500': 'd6c48d',
|
||||
'600': 'baa870',
|
||||
'700': '857545',
|
||||
'800': '524517',
|
||||
'900': '433809',
|
||||
'900': '225e1b',
|
||||
'A100': '#b9f6ca',
|
||||
'A200': '#69f0ae',
|
||||
'A400': '#00e676',
|
||||
'A700': '#00c853',
|
||||
'contrastDefaultColor': 'dark',
|
||||
'contrastLightColors': ['500', '600', '700', '800', '900']
|
||||
'contrastLightColors': '500 600 700 800 900'
|
||||
});
|
||||
$mdThemingProvider.definePalette('sogo-green', sogoGreenSwatch);
|
||||
$mdThemingProvider.definePalette('vintage-blue', {
|
||||
'50': 'f0faf9',
|
||||
'100': 'e1f5f3',
|
||||
@@ -61,7 +69,25 @@
|
||||
'contrastDarkColors': ['50', '100', '200'],
|
||||
'contrastLightColors': ['300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700']
|
||||
});
|
||||
$mdThemingProvider.definePalette('paper', paperSwatch);
|
||||
$mdThemingProvider.definePalette('paper', {
|
||||
'50': 'fcf7f8',
|
||||
'100': 'f7f1dc',
|
||||
'200': 'ede5ca',
|
||||
'300': 'e6d8ba',
|
||||
'400': 'e2d2a3',
|
||||
'500': 'd6c48d',
|
||||
'600': 'baa870',
|
||||
'700': '857545',
|
||||
'800': '524517',
|
||||
'900': '433809',
|
||||
'1000': '#000000',
|
||||
'A100': '#ffffff',
|
||||
'A200': '#eeeeee',
|
||||
'A400': '#bdbdbd',
|
||||
'A700': '#616161',
|
||||
'contrastDefaultColor': 'dark',
|
||||
'contrastLightColors': '500 600 700 800 900'
|
||||
});
|
||||
// Default theme definition
|
||||
$mdThemingProvider.theme('default')
|
||||
.primaryColor('vintage-blue', {
|
||||
@@ -71,7 +97,12 @@
|
||||
'hue-3': '700'
|
||||
})
|
||||
.accentColor('sogo-green')
|
||||
.backgroundColor('paper');
|
||||
.backgroundColor('paper', {
|
||||
'default': '600',
|
||||
'hue-1': '200',
|
||||
'hue-2': '50',
|
||||
'hue-3': '100'
|
||||
});
|
||||
})
|
||||
|
||||
.controller('toggleCtrl', ['$scope', '$timeout', '$mdSidenav', '$log', function ($scope, $timeout, $mdSidenav, $log) {
|
||||
|
||||
@@ -7,10 +7,10 @@
|
||||
/// botttombar extends
|
||||
///
|
||||
|
||||
.sg-bottombar {
|
||||
md-toolbar.sg-bottombar { // overclafied to compensate for the injected css
|
||||
@extends md-toolbar;
|
||||
|
||||
background-color:#212121; // fixme : use a variable
|
||||
background-color:$bottombar-color;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
md-toolbar.md-THEME_NAME-theme {
|
||||
background-color: '{{primary-color}}';
|
||||
sg-bottombar.md-THEME_NAME-theme {
|
||||
background-color: $bottombar-color;
|
||||
color: '{{primary-contrast}}';
|
||||
|
||||
.md-button {
|
||||
|
||||
@@ -11,4 +11,5 @@
|
||||
@import 'components/toolbar/toolbar.scss'; // todo : remove when settings are done
|
||||
@import "mixins";
|
||||
@import "extends";
|
||||
@import "bottombar-theme";
|
||||
// -----------------------------------------
|
||||
|
||||
@@ -74,8 +74,8 @@ $h6-margin-base: 2.33em 0 !default;
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
color: $foreground-primary-color;
|
||||
background: $background-color-base;
|
||||
//color: $foreground-primary-color;
|
||||
//background: $background-color-base;
|
||||
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-touch-callout: none;
|
||||
@@ -290,20 +290,20 @@ md-tab {
|
||||
}
|
||||
@return $map-str + '}';
|
||||
}
|
||||
.md-color-palette-definition {
|
||||
$content-rule: '{';
|
||||
$map-str: '';
|
||||
$keys: map-keys($colors);
|
||||
$len: length($keys);
|
||||
@for $i from 1 through $len {
|
||||
$key: nth($keys, $i);
|
||||
$value: map-get($colors, $key);
|
||||
$content-rule: $content-rule + '_' + $key + '_: ' + map-to-string($value);
|
||||
@if $i != $len {
|
||||
$content-rule: $content-rule + ',';
|
||||
}
|
||||
}
|
||||
$content-rule: $content-rule + '}';
|
||||
background-image: url("data:image/svg+xml;utf8,#{$content-rule}");
|
||||
display: none;
|
||||
}
|
||||
//.md-color-palette-definition {
|
||||
// $content-rule: '{';
|
||||
// $map-str: '';
|
||||
// $keys: map-keys($colors);
|
||||
// $len: length($keys);
|
||||
// @for $i from 1 through $len {
|
||||
// $key: nth($keys, $i);
|
||||
// $value: map-get($colors, $key);
|
||||
// $content-rule: $content-rule + '_' + $key + '_: ' + map-to-string($value);
|
||||
// @if $i != $len {
|
||||
// $content-rule: $content-rule + ',';
|
||||
// }
|
||||
// }
|
||||
// $content-rule: $content-rule + '}';
|
||||
// background-image: url("data:image/svg+xml;utf8,#{$content-rule}");
|
||||
// display: none;
|
||||
//}
|
||||
|
||||
@@ -6,30 +6,32 @@
|
||||
// palettes import -
|
||||
// ------------------------------------------------------------------------------
|
||||
// fixme : consolidate all settings and imports in a decent 'settings' file
|
||||
@import '../themes/color-palette'; // fixme : clarify if it is deeded or assure by javascript
|
||||
//@import '../themes/color-palette'; // fixme : clarify if it is deeded or assure by javascript
|
||||
|
||||
// Font Variables
|
||||
$font-family: RobotoDraft, Roboto, 'Helvetica Neue', sans-serif !default;
|
||||
$font-family: Ubuntu, 'Helvetica Neue', sans-serif; //override
|
||||
$dark-theme: false !default;
|
||||
$foreground-color-palette: $color-grey !default;
|
||||
$foreground-base-color: map-get($foreground-color-palette, '1000') !default;
|
||||
$foreground-primary-color: rgba($foreground-base-color, 0.73) !default; $foreground-primary-color: rgba($foreground-base-color, 0.87);//override
|
||||
$foreground-secondary-color: rgba($foreground-base-color, 0.54) !default;
|
||||
$foreground-tertiary-color: rgba($foreground-base-color, 0.26) !default;
|
||||
$foreground-quarternary-color: rgba($foreground-base-color, 0.12) !default;
|
||||
$foreground-text-shadow: none !default;
|
||||
//$dark-theme: false !default;
|
||||
//$foreground-color-palette: $color-grey !default;
|
||||
//$foreground-base-color: map-get($foreground-color-palette, '1000') !default;
|
||||
//$foreground-primary-color: rgba($foreground-base-color, 0.73) !default; $foreground-primary-color: rgba($foreground-base-color, 0.87);//override
|
||||
//$foreground-secondary-color: rgba($foreground-base-color, 0.54) !default;
|
||||
//$foreground-tertiary-color: rgba($foreground-base-color, 0.26) !default;
|
||||
//$foreground-quarternary-color: rgba($foreground-base-color, 0.12) !default;
|
||||
//$foreground-text-shadow: none !default;
|
||||
|
||||
|
||||
$input-border-color: $foreground-secondary-color !default;
|
||||
$input-disabled-border-color: $foreground-tertiary-color !default;
|
||||
|
||||
$background-color-palette: $color-grey !default;
|
||||
$background-color-base: map-get($background-color-palette, 'A100') !default;
|
||||
|
||||
$primary-color-palette: $color-light-blue !default;
|
||||
$warn-color-palette: $color-red !default;
|
||||
$primary-color-palette-contrast-color: white !default;
|
||||
//$input-border-color: $foreground-secondary-color !default;
|
||||
//$input-disabled-border-color: $foreground-tertiary-color !default;
|
||||
//
|
||||
//$background-color-palette: $color-paper !default;
|
||||
//$background-color-base: map-get($background-color-palette, '200') !default;
|
||||
//
|
||||
//$primary-color-palette: $color-light-blue !default;
|
||||
//$warn-color-palette: $color-red !default;
|
||||
//$primary-color-palette-contrast-color: white !default;
|
||||
//todo ; create grey map
|
||||
$bottombar-color: #121212;
|
||||
|
||||
// Layout
|
||||
// ------------------------------
|
||||
|
||||
@@ -423,6 +423,63 @@ $color-blue-grey: (
|
||||
'contrastDarkColors': 50 100 200 300
|
||||
);
|
||||
|
||||
// SOGo Green
|
||||
// ----------------------------
|
||||
$color-sogo-green: (
|
||||
'50': #eaf5e9,
|
||||
'100': #cbe5c8,
|
||||
'200': #aad6a5,
|
||||
'300': #88c781,
|
||||
'400': #66b86a,
|
||||
'500': #56b04c,
|
||||
'600': #4da143,
|
||||
'700': #388e3c,
|
||||
'800': #367d2e,
|
||||
'900': #225e1b,
|
||||
'A100': #b9f6ca,
|
||||
'A200': #69f0ae,
|
||||
'A400': #00e676,
|
||||
'A700': #00c853,
|
||||
'contrastDefaultColor': dark,
|
||||
'contrastLightColors': 500 600 700 800 900
|
||||
);
|
||||
|
||||
$color-vintage-blue: (
|
||||
'50': #f0faf9,
|
||||
'100': #e1f5f3,
|
||||
'200': #ceebe8,
|
||||
'300': #bfe0dd,
|
||||
'400': #b2d6d3,
|
||||
'500': #a1ccc8,
|
||||
'600': #8ebfbb,
|
||||
'700': #7db3b0,
|
||||
'800': #639997,
|
||||
'900': #4d8080,
|
||||
'A100': #d4f7fa,
|
||||
'A200': #c3f5fa,
|
||||
'A400': #53e3f0,
|
||||
'A700': #00b0c0,
|
||||
'contrastDefaultColor': light,
|
||||
'contrastDarkColors': 50 100 200,
|
||||
'contrastLightColors': 300 400 500 600 700 800 900 A100 A200 A400 A700
|
||||
|
||||
);
|
||||
|
||||
$color-paper: (
|
||||
'50': #fcf7f8,
|
||||
'100': #f7f1dc,
|
||||
'200': #ede5ca,
|
||||
'300': #e6d8ba,
|
||||
'400': #e2d2a3,
|
||||
'500': #d6c48d,
|
||||
'600': #baa870,
|
||||
'700': #857545,
|
||||
'800': #524517,
|
||||
'900': #433809,
|
||||
'contrastDefaultColor': dark,
|
||||
'contrastLightColors': 500 600 700 800 900
|
||||
);
|
||||
|
||||
$colors: (
|
||||
'red': $color-red,
|
||||
'pink': $color-pink,
|
||||
@@ -433,7 +490,7 @@ $colors: (
|
||||
'light-blue': $color-light-blue,
|
||||
'cyan': $color-cyan,
|
||||
'teal': $color-teal,
|
||||
'green': $color-green,
|
||||
//'green': $color-green,
|
||||
'light-green': $color-light-green,
|
||||
'lime': $color-lime,
|
||||
'yellow': $color-yellow,
|
||||
@@ -442,6 +499,10 @@ $colors: (
|
||||
'deep-orange': $color-deep-orange,
|
||||
'brown': $color-brown,
|
||||
'grey': $color-grey,
|
||||
'blue-grey': $color-blue-grey
|
||||
'blue-grey': $color-blue-grey,
|
||||
'paper': $color-paper,
|
||||
'vintage-blue': $color-vintage-blue,
|
||||
// redefine green with sogo-green
|
||||
'green': $color-sogo-green
|
||||
);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user