diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox index 6e8160337..38ebea54a 100644 --- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox +++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox @@ -288,6 +288,7 @@ + diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox index 3ecda420c..7ca0777db 100644 --- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox +++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox @@ -21,7 +21,7 @@
- +
{{currentMessage.subject}}
@@ -41,6 +41,9 @@ -
+ +
+ + diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox index 041257cbe..75bd3e7fb 100644 --- a/UI/Templates/MailerUI/UIxMailMainFrame.wox +++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox @@ -264,7 +264,7 @@
- +
@@ -304,7 +304,7 @@
-
+
diff --git a/UI/Templates/MailerUI/UIxMailViewTemplate.wox b/UI/Templates/MailerUI/UIxMailViewTemplate.wox index 7b6e42432..ab4c22487 100644 --- a/UI/Templates/MailerUI/UIxMailViewTemplate.wox +++ b/UI/Templates/MailerUI/UIxMailViewTemplate.wox @@ -7,7 +7,7 @@ xmlns:label="OGo:label" xmlns:uix="OGo:uix"> - +
diff --git a/UI/WebServerResources/js/Common/ui.js b/UI/WebServerResources/js/Common/ui.js index 08b9d0020..28074f5e4 100644 --- a/UI/WebServerResources/js/Common/ui.js +++ b/UI/WebServerResources/js/Common/ui.js @@ -9,6 +9,18 @@ 'use strict'; angular.module('SOGo.UI', ['ngMaterial']) +// md break-points values are hard-coded in angular-material/src/core/util/constant.js +// $mdMedia has a built-in support for those values but can also evaluate others +// For some reasons, angular-material's break-points don't match the specs +// Here we define values according to specs + .constant('sgConstant', { + 'sm': '(max-width: 600px)', + 'gt-sm': '(min-width: 600px)', + 'md': '(min-width: 600px) and (max-width: 1024px)', + 'gt-md': '(min-width: 1025px)', + 'lg': '(min-width: 1024px) and (max-width: 1280px)', + 'gt-lg': '(min-width: 1280px)' + }) .config(['$mdThemingProvider', function ($mdThemingProvider) { @@ -104,7 +116,8 @@ return l; }) - .controller('navController', ['$scope', '$timeout', '$mdSidenav', '$mdBottomSheet', '$log', function ($scope, $timeout, $mdSidenav, $mdBottomSheet, $log) { + .controller('navController', ['$scope', '$timeout', '$mdSidenav', '$mdBottomSheet', '$mdMedia', '$log', 'sgConstant', function ($scope, $timeout, $mdSidenav, $mdBottomSheet, $mdMedia, $log, sgConstant) { + $scope.toggleLeft = function () { $mdSidenav('left').toggle() .then(function () { @@ -123,5 +136,11 @@ templateUrl: 'bottomSheetTemplate.html' }); }; + $scope.$watch(function() { + return $mdMedia(sgConstant['gt-md']); + }, + function(newVal) { + $scope.isGtMedium = newVal; + }); }]); })(); diff --git a/UI/WebServerResources/scss/app.scss b/UI/WebServerResources/scss/app.scss deleted file mode 100644 index 76dc59c86..000000000 --- a/UI/WebServerResources/scss/app.scss +++ /dev/null @@ -1,83 +0,0 @@ -//@import "settings"; -//@import "foundation"; - -// Or selectively include components -// @import -// "foundation/components/accordion", -// "foundation/components/alert-boxes", -// "foundation/components/block-grid", -// "foundation/components/breadcrumbs", -// "foundation/components/button-groups", -// "foundation/components/buttons", -// "foundation/components/clearing", -// "foundation/components/dropdown", -// "foundation/components/dropdown-buttons", -// "foundation/components/flex-video", -// "foundation/components/forms", -// "foundation/components/grid", -// "foundation/components/inline-lists", -// "foundation/components/joyride", -// "foundation/components/keystrokes", -// "foundation/components/labels", -// "foundation/components/magellan", -// "foundation/components/orbit", -// "foundation/components/pagination", -// "foundation/components/panels", -// "foundation/components/pricing-tables", -// "foundation/components/progress-bars", -// "foundation/components/reveal", -// "foundation/components/side-nav", -// "foundation/components/split-buttons", -// "foundation/components/sub-nav", -// "foundation/components/switch", -// "foundation/components/tables", -// "foundation/components/tabs", -// "foundation/components/thumbs", -// "foundation/components/tooltips", -// "foundation/components/top-bar", -// "foundation/components/type", -// "foundation/components/offcanvas", -// "foundation/components/visibility"; - -// http://docs.angularjs.org/api/ng/directive/ngCloak -[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { - display: none !important; -} - -.animate-show { - -webkit-transition:all linear 0.5s; - transition:all linear 0.5s; - line-height:20px; - opacity:1; - padding:10px; - border:1px solid black; - background:white; -} - -.animate-show.ng-hide-add, -.animate-show.ng-hide-remove { - display:block!important; -} - -.animate-show.ng-hide { - line-height:0; - opacity:0; - padding:0 10px; -} - -.reveal-modal { - .close-reveal-modal { - &:hover { - color: #aaa; - } - } -} - - -._selected { - //background-color: #ddd !important; - //border: 2px solid #ddd !important; - /* -webkit-border-radius: 2px; */ - /* -moz-border-radius: 2px; */ - /* border-radius: 2px; */ -} diff --git a/UI/WebServerResources/scss/core/typography/typography.scss b/UI/WebServerResources/scss/core/typography/typography.scss index e68c4d26f..ce600e3c2 100644 --- a/UI/WebServerResources/scss/core/typography/typography.scss +++ b/UI/WebServerResources/scss/core/typography/typography.scss @@ -130,7 +130,7 @@ } // Google's Material design specs are in 'sp' or 'dp' which are not css units -// 'dp' is 'density independant pexels' and 'sp' is 'scale-independent pixels' +// 'dp' is 'density independant pixels' and 'sp' is 'scale-independent pixels' // (same as dp, but will be scaled by the user's font size preference) // Android gives a 160dpi base value to 'sp' and 'dp', but Google's examples seems to use 'sp' as 'px' // We define a scaling factor in case we need to adjust diff --git a/UI/WebServerResources/scss/core/variables.scss b/UI/WebServerResources/scss/core/variables.scss index 12730499d..431bc4ff4 100644 --- a/UI/WebServerResources/scss/core/variables.scss +++ b/UI/WebServerResources/scss/core/variables.scss @@ -17,9 +17,6 @@ $primary-color: sg-color($sogoBlue, 300) !default; //$foreground-primary-color: rgba($foreground-base-color, 0.73) !default; $foreground-primary-color: rgba($primary-color, 0.87);//override -$bottombar-color: #212121; - - // Layout and grid // ------------------------------ @@ -56,6 +53,11 @@ $layout-breakpoint-sm: 600px !default; $layout-breakpoint-md: 960px !default; $layout-breakpoint-lg: 1200px !default; +// Redefinitions +// $layout-breakpoint-sm: 360px; +$layout-breakpoint-md: 1025px; +$layout-breakpoint-lg: 1280px; + // App bar variables $app-bar-height: $sg-md-grid-pitch; diff --git a/UI/WebServerResources/scss/styles.scss b/UI/WebServerResources/scss/styles.scss index ae228d0c0..749402597 100755 --- a/UI/WebServerResources/scss/styles.scss +++ b/UI/WebServerResources/scss/styles.scss @@ -57,7 +57,7 @@ @import 'components/textField/textField'; @import 'components/toast/toast'; @import 'components/toolbar/toolbar'; -@import 'components/bottombar/bottombar'; +// @import 'components/bottombar/bottombar'; @import 'components/tooltip/tooltip'; @import 'components/whiteframe/whiteframe'; diff --git a/UI/WebServerResources/scss/views/ContactsUI.scss b/UI/WebServerResources/scss/views/ContactsUI.scss index c8a4a5eab..a39ddefd4 100644 --- a/UI/WebServerResources/scss/views/ContactsUI.scss +++ b/UI/WebServerResources/scss/views/ContactsUI.scss @@ -1,7 +1,8 @@ /*! ContactUI.scss */ [id ="contactsList"] { - flex: 0 0 $listView-width; + flex: 0 1 $listView-width; + min-width: ($listView-width - ($pitch * 2)); } [id = "contactsList"] .sg-md-subheader { @@ -9,12 +10,14 @@ } // md is overqualifying, we have to do the same to override md-content[ui-view="card"] { + margin: 0 auto; background-color: sg-color($sogoPaper, 200); } // md is overqualifying, we have to do the same to override md-card.viewer { - width: $detailView-width; + flex: 0 2 $detailView-width; + min-width: ($detailView-width - ($pitch * 2)); } // Contact editor diff --git a/UI/WebServerResources/scss/views/MailerUI.scss b/UI/WebServerResources/scss/views/MailerUI.scss index b582090c5..64324ac0d 100644 --- a/UI/WebServerResources/scss/views/MailerUI.scss +++ b/UI/WebServerResources/scss/views/MailerUI.scss @@ -4,7 +4,9 @@ } [ui-view="message"] { - flex: 0 0 $detailView-width; + flex: 1 2 $detailView-width; + min-width: ($detailView-width - $pitch); + max-width: ($detailView-width + $pitch); margin: 0 auto; }