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

(js,css) Show categories in events/tasks lists

Browse Source
This commit is contained in:
Francis Lachapelle
2015-11-17 12:22:06 -05:00
parent 2d6bdd37da
commit e4eef9b780
9 changed files with 46 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
View File

@@ -43,6 +43,7 @@
md-selected-item="editor.categories.selected"
md-search-text="editor.categories.searchText"
md-items="category in editor.component.constructor.filterCategories(editor.categories.searchText)"
md-min-length="0"
label:placeholder="Add a category">
<span md-highlight-text="editor.categories.searchText">{{category}}</span>
</md-autocomplete>

10
UI/Templates/SchedulerUI/UIxCalMainView.wox
View File

@@ -590,6 +590,10 @@
<div class="sg-color-chip" ng-class="event.getClassName('bg')"
ng-show="!event.selected"
ng-click="list.toggleComponentSelection($event, event)"><!-- calendar color --></div>
<div class="sg-category"
ng-repeat="category in event.categories | limitTo:5"
ng-class="'bg-category' + category"
ng-style="{ left: ($index * 3) + 'px' }"><!-- calendar color --></div>
<div class="sg-tile-content">
<div class="sg-md-subhead">
<div>{{event.c_title}}</div>
@@ -603,6 +607,7 @@
<md-icon ng-show="event.c_iscycle">repeat</md-icon>
<md-icon ng-show="event.c_nextalarm">alarm</md-icon>
</div>
<md-divider><!-- divider --></md-divider>
</md-list-item>
<md-list-item disabled="disabled" ng-if="list.component.$events.length == 0">
<p class="sg-md-caption"><var:string label:value="No events for selected criteria"/></p>
@@ -622,6 +627,10 @@
<div class="sg-color-chip" ng-class="task.getClassName('bg')"
ng-show="!task.selected"
ng-click="list.toggleComponentSelection($event, task)"><!-- calendar color --></div>
<div class="sg-category"
ng-repeat="category in task.categories | limitTo:5"
ng-class="'bg-category' + category"
ng-style="{ left: ($index * 3) + 'px' }"><!-- calendar color --></div>
<div class="sg-tile-content">
<div class="sg-md-subhead">
<div>{{task.c_title}}</div>
@@ -635,6 +644,7 @@
<md-icon ng-show="task.c_iscycle">repeat</md-icon>
<md-icon ng-show="event.c_nextalarm">alarm</md-icon>
</div>
<md-divider><!-- divider --></md-divider>
</md-list-item>
<md-list-item disabled="disabled" ng-if="list.component.$tasks.length == 0">
<p class="sg-md-caption"><var:string label:value="No tasks for selected criteria"/></p>

1
UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
View File

@@ -35,6 +35,7 @@
md-selected-item="editor.categories.selected"
md-search-text="editor.categories.searchText"
md-items="category in editor.component.constructor.filterCategories(editor.categories.searchText)"
md-min-length="0"
label:placeholder="Add a category">
<span md-highlight-text="editor.categories.searchText">{{category}}</span>
</md-autocomplete>

13
UI/WebServerResources/js/Scheduler/CalendarsController.js
View File

@@ -6,8 +6,8 @@
/**
* @ngInject
*/
CalendarsController.$inject = ['$rootScope', '$scope', '$window', '$mdDialog', '$log', '$mdToast', 'FileUploader', 'sgFocus', 'Dialog', 'sgSettings', 'Calendar', 'User', 'stateCalendars'];
function CalendarsController($rootScope, $scope, $window, $mdDialog, $log, $mdToast, FileUploader, focus, Dialog, Settings, Calendar, User, stateCalendars) {
CalendarsController.$inject = ['$rootScope', '$scope', '$window', '$mdDialog', '$log', '$mdToast', 'FileUploader', 'sgFocus', 'Dialog', 'sgSettings', 'Preferences', 'Calendar', 'User', 'stateCalendars'];
function CalendarsController($rootScope, $scope, $window, $mdDialog, $log, $mdToast, FileUploader, focus, Dialog, Settings, Preferences, Calendar, User, stateCalendars) {
var vm = this;
vm.activeUser = Settings.activeUser;
@@ -26,6 +26,15 @@
vm.subscribeToFolder = subscribeToFolder;
vm.today = today;
Preferences.ready().then(function() {
vm.categories = _.map(Preferences.defaults.SOGoCalendarCategories, function(name) {
return { id: name.asCSSIdentifier(),
name: name,
color: Preferences.defaults.SOGoCalendarCategoriesColors[name]
};
});
});
// Dispatch the event named 'calendars:list' when a calendar is activated or deactivated or
// when the color of a calendar is changed
$scope.$watch(

4
UI/WebServerResources/js/Scheduler/Component.service.js
View File

@@ -288,7 +288,6 @@
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;
@@ -462,6 +461,9 @@
if (this.dueDate)
this.due = new Date(this.dueDate.substring(0,10) + ' ' + this.dueDate.substring(11,16));
if (this.c_category)
this.categories = _.invoke(this.c_category, 'asCSSIdentifier');
// Parse recurrence rule definition and initialize default values
this.$isRecurrent = angular.isDefined(data.repeat);
if (this.repeat.days) {

4
UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js
View File

@@ -34,9 +34,9 @@
' 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"',
' <div class="sg-category" ng-repeat="category in block.component.categories"',
' ng-class="\'bg-category\' + category"',
' ng-style="{ right: ($index * 10) + \'%\' }"></div>',
' ng-style="{ right: ($index * 3) + \'px\' }"></div>',
' <div class="text">{{ block.component.summary }}',
' <span class="icons">',
// Component is reccurent

4
UI/WebServerResources/js/Scheduler/sgCalendarDayBlockGhost.directive.js
View File

@@ -23,9 +23,9 @@
'<div class="sg-event sg-event--ghost md-whiteframe-3dp ng-hide">',
' <div class="eventInside">',
// Categories color stripes
' <div class="category" ng-repeat="category in block.component.categories"',
' <div class="sg-category" ng-repeat="category in block.component.categories"',
' ng-class="\'bg-category\' + category"',
' ng-style="{ right: ($index * 10) + \'%\' }"></div>',
' ng-style="{ right: ($index * 3) + \'px\' }"></div>',
' <div class="text">{{ block.component.summary }}',
' <span class="icons">',
// Component is reccurent

7
UI/WebServerResources/scss/core/base_styles/_base_style.scss
View File

@@ -26,3 +26,10 @@
//optical adjustement
transform: translateY(-10%);
}
.sg-category {
position: absolute;
top: 0;
bottom: 0;
width: 3px;
}

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

@@ -1,6 +1,7 @@
/// SchedulerUI.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
$hours_margin: 50px;
$block_margin: 2%; // See sgCalendarDayBlock.directive.js
$block_radius: 3px;
/**
* Affected templates:
@@ -117,14 +118,14 @@ $block_margin: 2%; // See sgCalendarDayBlock.directive.js
&--first {
margin-left: $block_margin;
padding-left: 0;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-top-left-radius: $block_radius;
border-bottom-left-radius: $block_radius;
}
&--last {
margin-right: $block_margin;
padding-right: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-top-right-radius: $block_radius;
border-bottom-right-radius: $block_radius;
}
}
}
@@ -210,7 +211,7 @@ $block_margin: 2%; // See sgCalendarDayBlock.directive.js
.sg-event {
font-size: $sg-font-size-2;
font-weight: $sg-font-medium;
border-radius: 3px;
border-radius: $block_radius;
position: absolute;
left: 0;
right: 0;
@@ -259,14 +260,10 @@ $block_margin: 2%; // See sgCalendarDayBlock.directive.js
font-weight: $sg-font-light;
}
.category {
position: absolute;
top: 0;
bottom: 0;
width: 10%;
.sg-category {
&:first-child {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-top-right-radius: $block_radius;
border-bottom-right-radius: $block_radius;
}
}