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

Various Web interface changes

Browse Source 
- more contrasted primary palette;
- white toolbars for list and detail views;
- modules navigation always visible;
- wrapped detail views into a md-card;
- moved preferences button to the sidenav;
- moved the sidenav toggle button to the top toolbar;
- new "flip" visual effect when looking at the raw source of cards and
  messages.
This commit is contained in:
Francis Lachapelle committed 2015-12-04 15:15:44 -05:00
1 parent efba979f3d
commit e14414ed56
36 files changed
+755 -692
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

UI/WebServerResources/js/Common/Common.app.js
+12 -7
View File
@@ -131,6 +131,7 @@
*/
configure.$inject = ['$logProvider', '$compileProvider', '$mdThemingProvider', '$httpProvider'];
function configure($logProvider, $compileProvider, $mdThemingProvider, $httpProvider) {
// Accent palette
$mdThemingProvider.definePalette('sogo-green', {
'50': 'eaf5e9',
'100': 'cbe5c8',
@@ -142,14 +143,16 @@
'700': '388e3c',
'800': '367d2e',
'900': '225e1b',
'A100': 'b9f6ca',
// 'A100': 'b9f6ca',
'A100': 'ffffff', // assigned to md-hue-1
'A200': '69f0ae',
'A400': '00e676',
'A700': '00c853',
'contrastDefaultColor': 'dark',
'contrastDarkColors': ['50', '100', '200'],
// 'contrastDarkColors': ['50', '100', '200', 'A100'],
'contrastLightColors': ['300', '400', '500', '600', '700', '800', '900']
});
// Primary palette
$mdThemingProvider.definePalette('sogo-blue', {
'50': 'f0faf9',
'100': 'e1f5f3',
@@ -167,8 +170,9 @@
'A700': '00b0c0',
'contrastDefaultColor': 'light',
'contrastDarkColors': ['50', '100', '200'],
'contrastLightColors': ['300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700']
// 'contrastLightColors': ['300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700']
});
// Background palette
$mdThemingProvider.definePalette('sogo-paper', {
'50': 'fcf7f8',
'100': 'f7f1dc',
@@ -191,14 +195,15 @@
// Default theme definition
$mdThemingProvider.theme('default')
.primaryPalette('sogo-blue', {
'default': '300',
'hue-1': '100',
'hue-2': '400',
'default': '900',
'hue-1': '400',
'hue-2': '800',
'hue-3': 'A700'
})
.accentPalette('sogo-green', {
'default': '500',
'hue-1': '200',
// 'hue-1': '200',
'hue-1': 'A100',
'hue-2': '300',
'hue-3': 'A700'
})
UI/WebServerResources/js/Common/mdColors.app.js
+12 -14
View File
@@ -40,7 +40,7 @@
fgDefaultHue = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{hue}}','.md-fg']) + ' { color:{{value}};}'),
bgDefaultHue = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{hue}}','.md-bg']) + ' { background-color:{{value}};}'),
fgColor = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{palette}}','.md-fg']) + ' { color:{{value}};}'),
bgColor = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{palette}}','.md-bg']) + ' { background-color:{{value}};}'),
bgColor = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{palette}}','.md-bg']) + ' { background-color:{{value}}; color:{{contrast}}; }'),
bdrColor = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{palette}}','.md-bdr']) + ' { border-color:{{value}};}'),
fgHue = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{palette}}.md-{{hue}}','.md-fg']) + ' { color:{{value}};}'),
bgHue = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{palette}}.md-{{hue}}','.md-bg']) + ' { background-color:{{value}};}'),
@@ -79,24 +79,22 @@
function addRule(fgInterpolate, bgInterpolate, themeName, paletteName, colorArray, hueName){
// Set up interpolation functions to build css rules.
if (!colorArray) return;
var colorValue = 'rgb(' + colorArray.value[0] + ',' + colorArray.value[1] + ',' + colorArray.value[2] + ')';
var colorValue = 'rgb(' + colorArray.value[0] + ',' + colorArray.value[1] + ',' + colorArray.value[2] + ')',
colorContrast = 'rgb(' + colorArray.contrast[0] + ',' + colorArray.contrast[1] + ',' + colorArray.contrast[2] + ')',
context = {
theme: themeName,
palette: paletteName,
value: colorValue,
contrast: colorContrast,
hue: hueName
};
// Insert foreground color rule
customSheet.insertRule(fgInterpolate({
theme: themeName,
palette: paletteName,
value: colorValue,
hue: hueName
}), index);
customSheet.insertRule(fgInterpolate(context), index);
index += 1;
// Insert background color rule
customSheet.insertRule(bgInterpolate({
theme: themeName,
palette: paletteName,
value: colorValue,
hue: hueName
}), index);
customSheet.insertRule(bgInterpolate(context), index);
index += 1;
}
UI/WebServerResources/js/Common/navController.js
+1 -1
View File
@@ -15,7 +15,7 @@
$scope.isPopup = sgSettings.isPopup;
$scope.activeUser = sgSettings.activeUser();
$scope.baseURL = sgSettings.baseURL();
$scope.leftIsClose = false;
$scope.leftIsClose = $mdMedia(sgConstant.xs);
// Show current day in top bar
$scope.currentDay = window.currentDay;
UI/WebServerResources/js/Contacts/CardController.js
+11 -32
View File
@@ -35,7 +35,8 @@
vm.cancel = cancel;
vm.confirmDelete = confirmDelete;
vm.exportCard = exportCard;
vm.viewRawSource = viewRawSource;
vm.toggleRawSource = toggleRawSource;
vm.showRawSource = false;
function addOrgUnit() {
var i = vm.card.$addOrgUnit('');
@@ -137,38 +138,16 @@
window.location.href = ApplicationBaseURL + '/' + vm.currentFolder.id + '/export?uid=' + vm.card.id;
}
function viewRawSource($event) {
Card.$$resource.post(vm.currentFolder.id + '/' + vm.card.id, "raw").then(function(data) {
$mdDialog.show({
parent: angular.element(document.body),
targetEvent: $event,
clickOutsideToClose: true,
escapeToClose: true,
template: [
'<md-dialog flex="80" flex-sm="100" aria-label="' + l('View Card Source') + '">',
' <md-dialog-content class="md-dialog-content">',
' <pre>',
data,
' </pre>',
' </md-dialog-content>',
' <md-dialog-actions>',
' <md-button ng-click="close()">' + l('Close') + '</md-button>',
' </md-dialog-actions>',
'</md-dialog>'
].join(''),
controller: CardRawSourceDialogController
function toggleRawSource($event) {
if (!vm.showRawSource && !vm.rawSource) {
Card.$$resource.post(vm.currentFolder.id + '/' + vm.card.id, "raw").then(function(data) {
vm.rawSource = data;
vm.showRawSource = true;
});
/**
* @ngInject
*/
CardRawSourceDialogController.$inject = ['scope', '$mdDialog'];
function CardRawSourceDialogController(scope, $mdDialog) {
scope.close = function() {
$mdDialog.hide();
};
}
});
}
else {
vm.showRawSource = !vm.showRawSource;
}
}
}
UI/WebServerResources/js/Mailer/MessageController.js
+12 -33
View File
@@ -16,7 +16,7 @@
vm.message = stateMessage;
vm.service = Message;
vm.tags = { searchText: '', selected: '' };
vm.showFlags = stateMessage.flags.length > 0;
vm.showFlags = stateMessage.flags && stateMessage.flags.length > 0;
vm.doDelete = doDelete;
vm.close = close;
vm.reply = reply;
@@ -27,7 +27,8 @@
vm.closePopup = closePopup;
vm.newMessage = newMessage;
vm.saveMessage = saveMessage;
vm.viewRawSource = viewRawSource;
vm.toggleRawSource = toggleRawSource;
vm.showRawSource = false;
// Watch the message model "flags" attribute to remove on-the-fly a tag from the IMAP message
// when removed from the message viewer.
@@ -142,38 +143,16 @@
window.location.href = ApplicationBaseURL + '/' + vm.mailbox.id + '/saveMessages?uid=' + vm.message.uid;
}
function viewRawSource($event) {
Message.$$resource.post(vm.message.id, "viewsource").then(function(data) {
$mdDialog.show({
parent: angular.element(document.body),
targetEvent: $event,
clickOutsideToClose: true,
escapeToClose: true,
template: [
'<md-dialog flex="80" flex-sm="100" aria-label="' + l('View Message Source') + '">',
' <md-dialog-content class="md-dialog-content">',
' <pre>',
data,
' </pre>',
' </md-dialog-content>',
' <md-dialog-actions>',
' <md-button ng-click="close()">' + l('Close') + '</md-button>',
' </md-dialog-actions>',
'</md-dialog>'
].join(''),
controller: MessageRawSourceDialogController
function toggleRawSource($event) {
if (!vm.showRawSource && !vm.rawSource) {
Message.$$resource.post(vm.message.id, "viewsource").then(function(data) {
vm.rawSource = data;
vm.showRawSource = true;
});
/**
* @ngInject
*/
MessageRawSourceDialogController.$inject = ['scope', '$mdDialog'];
function MessageRawSourceDialogController(scope, $mdDialog) {
scope.close = function() {
$mdDialog.hide();
};
}
});
}
else {
vm.showRawSource = !vm.showRawSource;
}
}
}
UI/WebServerResources/js/Scheduler/ComponentController.js
+4 -3
View File
@@ -19,7 +19,7 @@
vm.replyAllOccurrences = replyAllOccurrences;
vm.deleteOccurrence = deleteOccurrence;
vm.deleteAllOccurrences = deleteAllOccurrences;
vm.viewRawSource = viewRawSource;
vm.toggleRawSource = toggleRawSource;
// Load all attributes of component
if (angular.isUndefined(vm.component.$futureComponentData)) {
@@ -106,15 +106,16 @@
});
}
function viewRawSource($event) {
function toggleRawSource($event) {
Calendar.$$resource.post(vm.component.pid + '/' + vm.component.id, "raw").then(function(data) {
$mdDialog.hide();
$mdDialog.show({
parent: angular.element(document.body),
targetEvent: $event,
clickOutsideToClose: true,
escapeToClose: true,
template: [
'<md-dialog flex="80" flex-sm="100" aria-label="' + l('View Raw Source') + '">',
'<md-dialog flex="80" flex-xs="100" aria-label="' + l('View Raw Source') + '">',
' <md-dialog-content class="md-dialog-content">',
' <pre>',
data,