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

fix(css): improve display of category colors (Calendar & Mail) 

In the list view, we now use color dots instead of stripes.

Fixes #5337
pull/299/head
Francis Lachapelle 2021-06-07 15:03:39 -04:00
parent 54548c550f
commit 322226bd81
5 changed files with 33 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
UI/WebServerResources/js/Mailer/sgMessageListItemMain.directive.js
View File

@ -24,6 +24,7 @@
' <div class="sg-tile-date"><!-- date --></div>',
' </div>',
' <div class="sg-md-body">',
' <div class="sg-category-dot-container"><!-- categories --></div>',
' <div class="sg-tile-subject"><!-- subject --></div>',
' <div class="sg-tile-size"><!-- size --></div>',
' <md-button class="sg-tile-btn md-secondary ng-hide" md-colors="::{ color: \'accent-600\'}" ng-click="$ctrl.toggleThread()">',
@ -121,17 +122,18 @@
$ctrl.message = $ctrl.parentController.message;
// Flags
var flagElements = $mdUtil.nodesToArray($element[0].querySelectorAll('.sg-category'));
var flagList = $element[0].querySelector('.sg-category-dot-container'),
$flagList = angular.element(flagList),
flagElements = $mdUtil.nodesToArray(flagList.querySelectorAll('.sg-category-dot'));
_.forEach(flagElements, function(flagElement) {
$element[0].removeChild(flagElement);
flagList.removeChild(flagElement);
});
for (i = 0; i < $ctrl.message.flags.length && i < 5; i++) {
var tag = $ctrl.message.flags[i];
if ($ctrl.service.$tags[tag]) {
var flagElement = angular.element('<div class="sg-category"></div>');
flagElement.css('left', (i*3) + 'px');
var flagElement = angular.element('<div class="sg-category-dot"></div>');
flagElement.css('background-color', $ctrl.service.$tags[tag][1]);
$element.prepend(flagElement);
$flagList.append(flagElement);
}
}

9
UI/WebServerResources/js/Scheduler/sgCalendarListEvent.directive.js
View File

@ -36,13 +36,14 @@
return [
'<div class="sg-event"',
' ng-click="clickComponent({clickEvent: $event, clickComponent: component})">',
// Categories color stripes
' <div class="sg-category" ng-repeat="category in ::component.categories"',
' ng-class="::(\'bg-category\' + category)"',
' ng-style="::{ right: ($index * 10) + \'%\' }"></div>',
' <div class="text">',
// Priority
' <span ng-show="::component.c_priority" class="sg-priority" ng-bind="::component.c_priority"></span>',
// Categories color dots
' <div class="sg-category-dot-container">',
' <div class="sg-category-dot" ng-repeat="category in ::component.categories"',
' ng-class="::(\'bg-category\' + category)"></div>',
' </div>',
// Summary
' {{ ::component.c_title }}',
' <span class="sg-icons">',

17
UI/WebServerResources/scss/core/structure.scss
View File

@ -38,7 +38,22 @@ html * {
top: 0;
bottom: 0;
width: 10%;
z-index: -1;
}
.sg-category-dot {
display: inline-block;
height: .9em;
width: .9em;
margin-bottom: -1px; // border width
margin-right: -.3em; // 1 third overlap
border-radius: 50%;
border-width: 1px;
border-style: solid;
&:last-child {
margin-right: .3em;
}
}
.sg-category-dot-container {
display: inline-block;
}
// Group fields of a form

4
UI/WebServerResources/scss/views/MailerUI.scss
View File

@ -18,6 +18,10 @@
content: '';
width: $mg;
}
.sg-category-dot {
border-color: rgba(255, 255, 255, .9);
}
}
// Container for the linear progress bar of the quota

1
UI/WebServerResources/scss/views/SchedulerUI.scss
View File

@ -407,6 +407,7 @@ $quarter_height: 10px;
}
.sg-category {
z-index: -1;
&:first-child {
border-top-right-radius: $block_radius;
border-bottom-right-radius: $block_radius;