fix(css): improve display of category colors (Calendar & Mail)
In the list view, we now use color dots instead of stripes. Fixes #5337pull/299/head
parent
54548c550f
commit
322226bd81
|
@ -24,6 +24,7 @@
|
||||||
' <div class="sg-tile-date"><!-- date --></div>',
|
' <div class="sg-tile-date"><!-- date --></div>',
|
||||||
' </div>',
|
' </div>',
|
||||||
' <div class="sg-md-body">',
|
' <div class="sg-md-body">',
|
||||||
|
' <div class="sg-category-dot-container"><!-- categories --></div>',
|
||||||
' <div class="sg-tile-subject"><!-- subject --></div>',
|
' <div class="sg-tile-subject"><!-- subject --></div>',
|
||||||
' <div class="sg-tile-size"><!-- size --></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()">',
|
' <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;
|
$ctrl.message = $ctrl.parentController.message;
|
||||||
|
|
||||||
// Flags
|
// 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) {
|
_.forEach(flagElements, function(flagElement) {
|
||||||
$element[0].removeChild(flagElement);
|
flagList.removeChild(flagElement);
|
||||||
});
|
});
|
||||||
for (i = 0; i < $ctrl.message.flags.length && i < 5; i++) {
|
for (i = 0; i < $ctrl.message.flags.length && i < 5; i++) {
|
||||||
var tag = $ctrl.message.flags[i];
|
var tag = $ctrl.message.flags[i];
|
||||||
if ($ctrl.service.$tags[tag]) {
|
if ($ctrl.service.$tags[tag]) {
|
||||||
var flagElement = angular.element('<div class="sg-category"></div>');
|
var flagElement = angular.element('<div class="sg-category-dot"></div>');
|
||||||
flagElement.css('left', (i*3) + 'px');
|
|
||||||
flagElement.css('background-color', $ctrl.service.$tags[tag][1]);
|
flagElement.css('background-color', $ctrl.service.$tags[tag][1]);
|
||||||
$element.prepend(flagElement);
|
$flagList.append(flagElement);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -36,13 +36,14 @@
|
||||||
return [
|
return [
|
||||||
'<div class="sg-event"',
|
'<div class="sg-event"',
|
||||||
' ng-click="clickComponent({clickEvent: $event, clickComponent: component})">',
|
' 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">',
|
' <div class="text">',
|
||||||
// Priority
|
// Priority
|
||||||
' <span ng-show="::component.c_priority" class="sg-priority" ng-bind="::component.c_priority"></span>',
|
' <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
|
// Summary
|
||||||
' {{ ::component.c_title }}',
|
' {{ ::component.c_title }}',
|
||||||
' <span class="sg-icons">',
|
' <span class="sg-icons">',
|
||||||
|
|
|
@ -38,7 +38,22 @@ html * {
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 10%;
|
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
|
// Group fields of a form
|
||||||
|
|
|
@ -18,6 +18,10 @@
|
||||||
content: '';
|
content: '';
|
||||||
width: $mg;
|
width: $mg;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sg-category-dot {
|
||||||
|
border-color: rgba(255, 255, 255, .9);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Container for the linear progress bar of the quota
|
// Container for the linear progress bar of the quota
|
||||||
|
|
|
@ -407,6 +407,7 @@ $quarter_height: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sg-category {
|
.sg-category {
|
||||||
|
z-index: -1;
|
||||||
&:first-child {
|
&:first-child {
|
||||||
border-top-right-radius: $block_radius;
|
border-top-right-radius: $block_radius;
|
||||||
border-bottom-right-radius: $block_radius;
|
border-bottom-right-radius: $block_radius;
|
||||||
|
|
Loading…
Reference in New Issue