modified navigation to match ownCloud style
This commit is contained in:
Hendrik Leppelsack
parent
22d0d136eb
commit
a0a3437f82
6 changed files with 102 additions and 49 deletions
|
|
@ -906,6 +906,7 @@
|
|||
font-weight: 500;
|
||||
outline: medium none;
|
||||
padding: 4px;
|
||||
transition: all 0.2s ease-in-out 0s;
|
||||
}
|
||||
#task-details div.content-wrapper .body .section input.focus {
|
||||
background-color: #F8F8F8;
|
||||
|
|
|
|||
|
|
@ -956,6 +956,7 @@
|
|||
font-weight: 500;
|
||||
outline: medium none;
|
||||
padding: 4px;
|
||||
transition: all 0.2s ease-in-out 0s;
|
||||
&.focus{
|
||||
background-color: #F8F8F8;
|
||||
border: 1px solid rgba(43, 136, 217, 0.65);
|
||||
|
|
|
|||
|
|
@ -43,9 +43,9 @@ angular.module('Tasks',['OC','ngRoute','ngAnimate','ui.bootstrap','ui.select',
|
|||
return
|
||||
]
|
||||
|
||||
angular.module('Tasks').run ['Config', '$timeout',
|
||||
angular.module('Tasks').run ['$document', '$rootScope', 'Config', '$timeout',
|
||||
'ListsBusinessLayer', 'TasksBusinessLayer', 'SearchBusinessLayer'
|
||||
(Config, $timeout,TasksBusinessLayer, ListsBusinessLayer,
|
||||
($document, $rootScope, Config, $timeout,TasksBusinessLayer, ListsBusinessLayer,
|
||||
SearchBusinessLayer) ->
|
||||
|
||||
init = false
|
||||
|
|
@ -61,6 +61,10 @@ angular.module('Tasks').run ['Config', '$timeout',
|
|||
|
||||
OCA.Search.tasks = SearchBusinessLayer
|
||||
|
||||
$document.click (event) ->
|
||||
$rootScope.$broadcast 'documentClicked', event
|
||||
return
|
||||
|
||||
moment.lang('details', {
|
||||
calendar: {
|
||||
lastDay : '['+t('tasks','Due yesterday')+'], HH:mm'
|
||||
|
|
@ -142,4 +146,4 @@ angular.module('Tasks').run ['Config', '$timeout',
|
|||
yy: t('tasks', "%d years")
|
||||
}
|
||||
})
|
||||
]
|
||||
]
|
||||
|
|
|
|||
17
js/app/directives/appnavigationentryutils.coffee
Normal file
17
js/app/directives/appnavigationentryutils.coffee
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
angular.module('Tasks').directive 'appNavigationEntryUtils', ->
|
||||
'use strict'
|
||||
{
|
||||
restrict: 'C'
|
||||
link: (scope, elm) ->
|
||||
menu = elm.siblings('.app-navigation-entry-menu')
|
||||
button = $(elm).find('.app-navigation-entry-utils-menu-button button')
|
||||
button.click ->
|
||||
menu.toggleClass 'open'
|
||||
return
|
||||
scope.$on 'documentClicked', (scope, event) ->
|
||||
if event.target != button[0]
|
||||
menu.removeClass 'open'
|
||||
return
|
||||
return
|
||||
}
|
||||
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
]);
|
||||
|
||||
angular.module('Tasks').run([
|
||||
'Config', '$timeout', 'ListsBusinessLayer', 'TasksBusinessLayer', 'SearchBusinessLayer', function(Config, $timeout, TasksBusinessLayer, ListsBusinessLayer, SearchBusinessLayer) {
|
||||
'$document', '$rootScope', 'Config', '$timeout', 'ListsBusinessLayer', 'TasksBusinessLayer', 'SearchBusinessLayer', function($document, $rootScope, Config, $timeout, TasksBusinessLayer, ListsBusinessLayer, SearchBusinessLayer) {
|
||||
var init, update;
|
||||
init = false;
|
||||
(update = function() {
|
||||
|
|
@ -42,6 +42,9 @@
|
|||
return timeOutUpdate();
|
||||
})();
|
||||
OCA.Search.tasks = SearchBusinessLayer;
|
||||
$document.click(function(event) {
|
||||
$rootScope.$broadcast('documentClicked', event);
|
||||
});
|
||||
moment.lang('details', {
|
||||
calendar: {
|
||||
lastDay: '[' + t('tasks', 'Due yesterday') + '], HH:mm',
|
||||
|
|
@ -130,6 +133,29 @@
|
|||
|
||||
}).call(this);
|
||||
|
||||
(function() {
|
||||
angular.module('Tasks').directive('appNavigationEntryUtils', function() {
|
||||
'use strict';
|
||||
return {
|
||||
restrict: 'C',
|
||||
link: function(scope, elm) {
|
||||
var button, menu;
|
||||
menu = elm.siblings('.app-navigation-entry-menu');
|
||||
button = $(elm).find('.app-navigation-entry-utils-menu-button button');
|
||||
button.click(function() {
|
||||
menu.toggleClass('open');
|
||||
});
|
||||
scope.$on('documentClicked', function(scope, event) {
|
||||
if (event.target !== button[0]) {
|
||||
menu.removeClass('open');
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
}).call(this);
|
||||
|
||||
(function() {
|
||||
angular.module('Tasks').directive('avatar', function() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,65 +1,69 @@
|
|||
<div ng-app="Tasks" ng-cloak ng-controller="AppController" ng-click="closeAll($event)" id="tasks_wrapper" class="handler">
|
||||
<div id="app-navigation" ng-controller="ListController">
|
||||
<div id="task_lists_header" class="header">
|
||||
<div id="main-toolbar">
|
||||
<a id="loading" class="handler" ng-click="update()">
|
||||
<span class="loading" ng-class="{'done':!isLoading()}"></span>
|
||||
<ul id="collections">
|
||||
<li ng-repeat="collection in collections" id="collection_{{ collection.id }}" rel="{{ collection.id }}"
|
||||
ng-class="{'animate-up': hideCollection(collection.id), active: collection.id==route.listID}" oc-drop-task>
|
||||
<a href="#/lists/{{ collection.id }}">
|
||||
<span class="icon collection-{{ collection.id }}"><text ng-show="collection.id=='today'"><?php p($_['DOM']); ?></text></span>
|
||||
<span class="count">{{ getCollectionString(collection.id) }}</span>
|
||||
<span class="title"><text>{{ collection.displayname }}</text></span>
|
||||
</a>
|
||||
</li>
|
||||
<li ng-repeat="list in lists" id="list_{{ list.id }}" rel="{{ list.id }}" class="with-menu" ng-class="{active: list.id==route.listID}" oc-drop-task>
|
||||
<a href="#/lists/{{ list.id }}" style="border-right: 4px solid {{ list.calendarcolor }};">
|
||||
<span class="icon list-list"></span>
|
||||
<span class="title"><text ng-dblclick="editName(list.id)" oc-click-focus="{selector: 'input.edit', timeout: 0}">{{ list.displayname }}</text></span>
|
||||
</a>
|
||||
<div class="app-navigation-entry-utils">
|
||||
<ul>
|
||||
<li class="app-navigation-entry-utils-counter"><text ng-show="getListCount(list.id,'all')">{{ getListCount(list.id,'all') }}</text></li>
|
||||
<li class="app-navigation-entry-utils-menu-button svg"><button></button></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="app-navigation-entry-menu">
|
||||
<ul>
|
||||
<li><button class="icon-rename svg" title="rename" ng-click="editName(list.id)"></button></li>
|
||||
<li><button class="icon-delete svg" title="delete" ng-click="deleteList(list.id)" ng-show="showDelete(list.id)"></button></li>
|
||||
</ul>
|
||||
</div>
|
||||
<input ng-model="list.displayname" class="edit handler" type="text" ng-show="route.listparameter=='name' && route.listID == list.id" stop-event="click"
|
||||
ng-keydown="checkName($event)">
|
||||
</li>
|
||||
<li>
|
||||
<a class="addlist handler" ng-click="startAddingList()" stop-event="click" oc-click-focus="{selector: '#newList', timeout: 0}">
|
||||
<span class="icon detail-add"></span>
|
||||
<span class="title"><text><?php p($l->t('Add List...')); ?></text></span>
|
||||
<input id="newList" ng-model="status.newListName" class="edit" type="text" ng-disabled="isAddingList" ng-show="status.addingList"
|
||||
stop-event="click" placeholder="<?php p($l->t('New List')); ?>" ng-keydown="checkListInput($event)" />
|
||||
</a>
|
||||
<li>
|
||||
</ul>
|
||||
<div id="app-settings">
|
||||
<div id="app-settings-header">
|
||||
<button class="settings-button" data-apps-slide-toggle="#app-settings-content"></button>
|
||||
</div>
|
||||
<div id="app-settings-content">
|
||||
<h2><label for="startOfWeek"><?php p($l->t('Start of week')); ?></label></h2>
|
||||
<select id="startOfWeek" ng-change="setStartOfWeek()" ng-model="settingsmodel.getById('various').startOfWeek" ng-options="startOfWeekOption.id as startOfWeekOption.name for startOfWeekOption in startOfWeekOptions"></select>
|
||||
<a class="settings" ng-click="showSettings()" stop-event="click">
|
||||
More Settings
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="task_lists_scroll" class="scroll">
|
||||
<ul id="collection_filters">
|
||||
<li ng-repeat="collection in collections" id="collection_{{ collection.id }}" rel="{{ collection.id }}"
|
||||
ng-class="{'animate-up': hideCollection(collection.id), active: collection.id==route.listID}" oc-drop-task>
|
||||
<a href="#/lists/{{ collection.id }}">
|
||||
<span class="icon collection-{{ collection.id }}"><text ng-show="collection.id=='today'"><?php p($_['DOM']); ?></text></span>
|
||||
<span class="count">{{ getCollectionString(collection.id) }}</span>
|
||||
<span class="title"><text>{{ collection.displayname }}</text></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul id="collection_lists">
|
||||
<li ng-repeat="list in lists" id="list_{{ list.id }}" rel="{{ list.id }}" ng-class="{active: list.id==route.listID}" oc-drop-task>
|
||||
<a href="#/lists/{{ list.id }}" style="border-right: 4px solid {{ list.calendarcolor }};">
|
||||
<span class="icon list-list"></span>
|
||||
<span class="count"><text ng-show="getListCount(list.id,'all')">{{ getListCount(list.id,'all') }}</text></span>
|
||||
<span class="title">
|
||||
<text ng-dblclick="editName(list.id)" oc-click-focus="{selector: 'input.edit', timeout: 0}">{{ list.displayname }}</text>
|
||||
</span>
|
||||
</a>
|
||||
<input ng-model="list.displayname" class="edit handler" type="text" ng-show="route.listparameter=='name' && route.listID == list.id"
|
||||
ng-keydown="checkName($event)">
|
||||
</li>
|
||||
</ul>
|
||||
<a class="addlist handler" ng-click="startAddingList()" oc-click-focus="{selector: '#newList', timeout: 0}">
|
||||
<span class="icon detail-add"></span>
|
||||
<span class="title"><text><?php p($l->t('Add List...')); ?></text></span>
|
||||
<input id="newList" ng-model="status.newListName" class="edit" type="text" ng-disabled="isAddingList" ng-show="status.addingList"
|
||||
placeholder="<?php p($l->t('New List')); ?>" ng-keydown="checkListInput($event)" />
|
||||
</a>
|
||||
</div>
|
||||
<div id="task_lists_footer" class="footer">
|
||||
<a class="delete" ng-click="deleteList(route.listID)" ng-show="showDelete(route.listID)">
|
||||
<span class="icon detail-trash"></span>
|
||||
</a>
|
||||
<a class="settings" ng-click="showSettings()">
|
||||
<span class="icon detail-settings"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="app-content" ng-controller="TasksController" ng-class="{'details-visible':route.taskID}">
|
||||
<div class="content-wrapper">
|
||||
<div id="add-task" class="add-task handler" ng-show="showInput()" ng-class="{'focus':status.focusTaskInput}">
|
||||
<a class="input-star">
|
||||
<span class="icon input-star "></span>
|
||||
<span class="icon input-star"></span>
|
||||
</a>
|
||||
<a class="input-date">
|
||||
<span class="icon input-date"></span>
|
||||
</a>
|
||||
<form ng-submit="addTask(taskName)" name="addTaskForm">
|
||||
<input id="target" ng-disabled="isAddingTask" ng-click="focusInput()" class="transparent" placeholder="{{ getAddString() }}" ng-model="taskName"
|
||||
ng-keydown="checkTaskInput($event)"/>
|
||||
ng-keydown="checkTaskInput($event)"/>
|
||||
</form>
|
||||
</div>
|
||||
<div class="task-list" ng-class="{'completed-hidden':!settingsmodel.getById('various').showHidden}">
|
||||
|
|
|
|||
Loading…
Reference in a new issue