amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-05-20 19:05:25 +00:00
Code Issues Projects Releases Wiki Activity

(js) Show events categories as color bands

Browse Source
This commit is contained in:
Francis Lachapelle
2015-11-14 14:29:21 -05:00
parent ace9fa9e4e
commit 4685c0ff2a
7 changed files with 61 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
UI/Templates/SchedulerUI/UIxCalMainView.wox
+8 -33
View File
@@ -106,45 +106,20 @@
<p><span class="label"><var:string label:value="Created by" /></span> <span>!- space -</span></p>
<p class="description">!- space -</p>
</div>
</div>
<div id="uploadDialog" style="display: none" class="dialog left">
<div>
<h3><var:string label:value="Import Events"/></h3>
<p class="prompt"><var:string label:value="Select an iCalendar file (.ics)."/></p>
<form const:href="" name="uploadForm" id="uploadForm" method="post"
enctype="multipart/form-data"
onsubmit="return AIM.submit(this, {'onStart' : validateUploadForm,
'onComplete' : uploadCompleted})">
<p class="prompt"><input type="file" name="calendarFile" class="textField" id="calendarFile" />
<a href="#" class="button actionButton" id="uploadSubmit"
onclick="if($('uploadForm').onsubmit()) $('uploadForm').submit()">
<span><var:string label:value="Upload" /></span></a>
<a href="#" class="button" const:id="uploadCancel">
<span><var:string label:value="Cancel" /></span></a>
</p></form>
<hr/>
</div>
</div>
<div id="uploadResults" style="display: none" class="dialog left">
<div>
<h3><var:string label:value="Import Events"/></h3>
<p><span id="uploadResultsContent">!- empty -</span>
<a href="#" class="button" const:id="uploadOK">
<span><var:string label:value="Done" /></span></a></p>
<hr/>
</div>
</div>
-->
-->
<main class="view layout-fill" ui-view="calendars" layout="row" ng-controller="navController"><!-- calendars list --></main>
<script type = "text/ng-template" id="UIxCalMainFrame">
<script type="text/ng-template" id="UIxCalMainView">
<!-- calendars colors -->
<div sg-folder-stylesheet="true"
<sg-folder-stylesheet
ng-repeat="calendar in app.service.$findAll()"
ng-model="calendar"><!-- stylesheet --></div>
ng-model="calendar"><!-- stylesheet --></sg-folder-stylesheet>
<!-- calendars colors -->
<sg-category-stylesheet
ng-repeat="category in app.categories"
ng-model="category"><!-- stylesheet --></sg-category-stylesheet>
<!-- Sidenav -->
<md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
<var:component className="UIxSidenavToolbarTemplate" />
UI/WebServerResources/js/Common/sgFolderStylesheet.directive.js
+20 -16
View File
@@ -5,24 +5,24 @@
'use strict';
/*
* sgFolderStylesheet - Add CSS stylesheet for folder (addressbook or calendar)
* sgFolderStylesheet - Add CSS stylesheet for a folder's color (addressbook or calendar)
* @memberof SOGo.Common
* @restrict attribute
* @param {object} ngModel - the object literal describing the folder (an Addressbook or Calendar instance)
* @example:
<div sg-folder-stylesheet="true"
<sg-folder-stylesheet
ng-repeat="calendar in calendars.list"
ng-model="calendar" />
</div>
*/
function sgFolderStylesheet() {
return {
restrict: 'A',
restrict: 'E',
require: 'ngModel',
scope: {
ngModel: '='
},
replace: true,
bindToController: true,
controller: sgFolderStylesheetController,
controllerAs: 'cssCtrl',
@@ -31,11 +31,13 @@
/* Background color */
' .bg-folder{{ cssCtrl.ngModel.id }},',
' .bg-folder{{ cssCtrl.ngModel.id }} label,',
' .bg-folder{{ cssCtrl.ngModel.id }} .md-input,',
' .sg-event.bg-folder{{ cssCtrl.ngModel.id }} md-icon {',
' .bg-folder{{ cssCtrl.ngModel.id }} .md-input {',
' background-color: {{ cssCtrl.ngModel.color }} !important;',
' color: {{ cssCtrl.contrast(cssCtrl.ngModel.color) }} !important;',
' }',
' .sg-event.bg-folder{{ cssCtrl.ngModel.id }} md-icon {',
' color: {{ cssCtrl.contrast(cssCtrl.ngModel.color) }} !important;',
' }',
// Set the contrast color of toolbar icons except the one of the background
' md-toolbar.bg-folder{{ cssCtrl.ngModel.id }} md-icon:not(.sg-icon-toolbar-bg) {',
' color: {{ cssCtrl.contrast(cssCtrl.ngModel.color) }} !important;',
@@ -81,21 +83,23 @@
// Respect contrast ratio recommendation from W3C:
// http://www.w3.org/TR/WCAG20/#contrast-ratiodef
function contrast(hex) {
var color, c, l;
var color, c, l = 1;
color = hexToRgb(hex);
c = [color.r / 255, color.g / 255, color.b / 255];
if (color) {
c = [color.r / 255, color.g / 255, color.b / 255];
for (var i = 0; i < c.length; ++i) {
if (c[i] <= 0.03928) {
c[i] = c[i] / 12.92;
for (var i = 0; i < c.length; ++i) {
if (c[i] <= 0.03928) {
c[i] = c[i] / 12.92;
}
else {
c[i] = Math.pow((c[i] + 0.055) / 1.055, 2.4);
}
}
else {
c[i] = Math.pow((c[i] + 0.055) / 1.055, 2.4);
}
}
l = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
l = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
}
if (l > 0.179) {
return 'black';
UI/WebServerResources/js/Scheduler/Component.service.js
+1
View File
@@ -288,6 +288,7 @@
var componentData = _.object(this.eventsFields, eventData),
start = new Date(componentData.c_startdate * 1000);
componentData.hour = start.getHourString();
componentData.categories = _.invoke(componentData.c_category, 'asCSSIdentifier');
componentData.blocks = [];
objects.push(new Component(componentData));
return objects;
UI/WebServerResources/js/Scheduler/Scheduler.app.js
+1 -1
View File
@@ -18,7 +18,7 @@
url: '/calendar',
views: {
calendars: {
templateUrl: 'UIxCalMainFrame', // UI/Templates/SchedulerUI/UIxCalMainFrame.wox
templateUrl: 'UIxCalMainView', // UI/Templates/SchedulerUI/UIxCalMainView.wox
controller: 'CalendarsController',
controllerAs: 'app'
}
UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js
+8 -1
View File
@@ -33,6 +33,10 @@
// Add a class while dragging
' ng-class="{\'sg-event--dragging\': block.dragging}">',
' <div class="eventInside" ng-click="clickBlock({clickEvent: $event, clickComponent: block.component})">',
// Categories color stripes
' <div class="category" ng-repeat="category in block.component.categories"',
' ng-class="\'bg-category\' + category"',
' ng-style="{ right: ($index * 10) + \'%\' }"></div>',
' <div class="text">{{ block.component.summary }}',
' <span class="icons">',
// Component is reccurent
@@ -44,7 +48,10 @@
// Component is private
' <md-icon ng-if="block.component.c_classification == 2" class="material-icons icon-vpn-key"></md-icon>',
' </span>',
' <div class="secondary" ng-if="block.component.c_location"><md-icon>place</md-icon> {{block.component.c_location}}</div>',
// Location
' <div class="secondary" ng-if="block.component.c_location">',
' <md-icon>place</md-icon> {{block.component.c_location}}',
' </div>',
' </div>',
' </div>',
'</div>'
UI/WebServerResources/js/Scheduler/sgCalendarDayBlockGhost.directive.js
+11 -1
View File
@@ -22,8 +22,14 @@
template: [
'<div class="sg-event sg-event--ghost ng-hide">',
' <div class="eventInside">',
' <div class="text">{{ block.component.summary }}</span>',
// Categories color stripes
' <div class="category" ng-repeat="category in block.component.categories"',
' ng-class="\'bg-category\' + category"',
' ng-style="{ right: ($index * 10) + \'%\' }"></div>',
' <div class="text">{{ block.component.summary }}',
' <span class="icons">',
// Component is reccurent
' <md-icon ng-if="block.component.occurrenceId" class="material-icons icon-repeat"></md-icon>',
// Component has an alarm
' <md-icon ng-if="block.component.c_nextalarm" class="material-icons icon-alarm"></md-icon>',
// Component is confidential
@@ -31,6 +37,10 @@
// Component is private
' <md-icon ng-if="block.component.c_classification == 2" class="material-icons icon-vpn-key"></md-icon>',
' </span>',
// Location
' <div class="secondary" ng-if="block.component.c_location">',
' <md-icon>place</md-icon> {{block.component.c_location}}',
' </div>',
' </div>',
' </div>',
' <div class="ghostStartHour" ng-if="startHour">{{ startHour }}</div>',
UI/WebServerResources/scss/views/SchedulerUI.scss
+12
View File
@@ -209,6 +209,7 @@ $block_margin: 2%; // See sgCalendarDayBlock.directive.js
// The outer event container
.sg-event {
font-size: $sg-font-size-2;
font-weight: $sg-font-medium;
border-radius: 3px;
position: absolute;
left: 0;
@@ -250,10 +251,21 @@ $block_margin: 2%; // See sgCalendarDayBlock.directive.js
font-size: $sg-font-size-2;
}
.icons md-icon {
float: right;
}
.secondary { // location in days view, hours in month view
font-weight: $sg-font-light;
}
.category {
position: absolute;
top: 0;
bottom: 0;
width: 10%;
}
// Event DnD drag grips
&:hover {