diff options
| -rw-r--r-- | appinfo/info.xml | 2 | ||||
| -rw-r--r-- | css/src/style.scss | 14 | ||||
| -rw-r--r-- | css/vendor/angularui/ui-select/select2.css | 601 | ||||
| -rw-r--r-- | js/app/app.js | 6 | ||||
| -rw-r--r-- | templates/main.php | 505 |
5 files changed, 262 insertions, 866 deletions
diff --git a/appinfo/info.xml b/appinfo/info.xml index dd81b684..300f724b 100644 --- a/appinfo/info.xml +++ b/appinfo/info.xml @@ -22,6 +22,6 @@ <repository type="git">https://github.com/nextcloud/tasks.git</repository> <dependencies> <owncloud min-version="0" max-version="0"/> - <nextcloud min-version="12" max-version="13"/> + <nextcloud min-version="14" max-version="14"/> </dependencies> </info> diff --git a/css/src/style.scss b/css/src/style.scss index 56f67dc7..59fad94e 100644 --- a/css/src/style.scss +++ b/css/src/style.scss @@ -316,7 +316,6 @@ $white: #fff; } #content { - overflow: hidden; color: $gray_dark; } @@ -327,7 +326,7 @@ $white: #fff; margin: 12px 0; position: relative; border: 1px solid $gray_light; - width: calc(100% - 54px); + width: calc(100% - 56px); float: left; height: 34px; @@ -544,7 +543,6 @@ ol[dnd-list] { font-weight: bold; margin: -2px 4px 0; padding: 2px 5px; - min-height: 22px; } } @@ -651,6 +649,9 @@ ol[dnd-list] { .content-wrapper { padding: 0; + box-sizing: border-box; + height: 100%; + overflow: hidden; .notice { color: $gray; @@ -707,7 +708,7 @@ ol[dnd-list] { display: inline-block; min-height: 24px; margin: 13px 0; - width: calc(100% - 100px); + width: calc(100% - 115px); padding: 0 6px; line-height: 22px; // this border is to adjust the size of the div to the size @@ -727,12 +728,11 @@ ol[dnd-list] { .expandable-container { background: none repeat scroll 0 0 $white; - box-sizing: border-box; border: 1px solid $gray; padding: 0 6px; display: none !important; margin: 13px 0; - width: calc(100% - 100px); + width: calc(100% - 115px); line-height: 24px; min-height: 24px; @@ -994,7 +994,7 @@ ol[dnd-list] { background-color: $gray_easy; box-shadow: none; border-color: $gray_light; - min-height: 22px; + padding: 3px 5px 3px 18px; a.select2-search-choice-close { opacity: .4; diff --git a/css/vendor/angularui/ui-select/select2.css b/css/vendor/angularui/ui-select/select2.css deleted file mode 100644 index 7ca021e4..00000000 --- a/css/vendor/angularui/ui-select/select2.css +++ /dev/null @@ -1,601 +0,0 @@ -/* -Version: 3.4.5 Timestamp: Mon Nov 4 08:22:42 PST 2013 -*/ -.select2-container { - margin: 0; - position: relative; - display: inline-block; - /* inline-block for ie7 */ - zoom: 1; - *display: inline; - vertical-align: middle; -} - -.select2-container, -.select2-drop, -.select2-search, -.select2-search input { - /* - Force border-box so that % widths fit the parent - container without overlap because of margin/padding. - - More Info : http://www.quirksmode.org/css/box.html - */ - -webkit-box-sizing: border-box; /* webkit */ - -moz-box-sizing: border-box; /* firefox */ - box-sizing: border-box; /* css3 */ -} - -.select2-container .select2-choice { - display: block; - height: 26px; - padding: 0 0 0 8px; - overflow: hidden; - position: relative; - - border: 1px solid #aaa; - white-space: nowrap; - line-height: 26px; - color: #444; - text-decoration: none; - - border-radius: 4px; - - background-clip: padding-box; - - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - - background-color: #fff; - background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff)); - background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 50%); - background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 50%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0); - background-image: linear-gradient(top, #fff 0%, #eee 50%); -} - -.select2-container.select2-drop-above .select2-choice { - border-bottom-color: #aaa; - - border-radius: 0 0 4px 4px; - - background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.9, #fff)); - background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 90%); - background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 90%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0); - background-image: linear-gradient(top, #eee 0%, #fff 90%); -} - -.select2-container.select2-allowclear .select2-choice .select2-chosen { - margin-right: 42px; -} - -.select2-container .select2-choice > .select2-chosen { - margin-right: 26px; - display: block; - overflow: hidden; - - white-space: nowrap; - - text-overflow: ellipsis; -} - -.select2-container .select2-choice abbr { - display: none; - width: 12px; - height: 12px; - position: absolute; - right: 24px; - top: 8px; - - font-size: 1px; - text-decoration: none; - - border: 0; - background: url('select2.png') right top no-repeat; - cursor: pointer; - outline: 0; -} - -.select2-container.select2-allowclear .select2-choice abbr { - display: inline-block; -} - -.select2-container .select2-choice abbr:hover { - background-position: right -11px; - cursor: pointer; -} - -.select2-drop-mask { - border: 0; - margin: 0; - padding: 0; - position: fixed; - left: 0; - top: 0; - min-height: 100%; - min-width: 100%; - height: auto; - width: auto; - opacity: 0; - z-index: 9998; - /* styles required for IE to work */ - background-color: #fff; - filter: alpha(opacity=0); -} - -.select2-drop { - width: 100%; - margin-top: -1px; - position: absolute; - z-index: 9999; - top: 100%; - - background: #fff; - color: #000; - border: 1px solid #aaa; - border-top: 0; - - border-radius: 0 0 4px 4px; - - -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15); - box-shadow: 0 4px 5px rgba(0, 0, 0, .15); -} - -.select2-drop-auto-width { - border-top: 1px solid #aaa; - width: auto; -} - -.select2-drop-auto-width .select2-search { - padding-top: 4px; -} - -.select2-drop.select2-drop-above { - margin-top: 1px; - border-top: 1px solid #aaa; - border-bottom: 0; - - border-radius: 4px 4px 0 0; - - -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); - box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); -} - -.select2-drop-active { - border: 1px solid #5897fb; - border-top: none; -} - -.select2-drop.select2-drop-above.select2-drop-active { - border-top: 1px solid #5897fb; -} - -.select2-container .select2-choice .select2-arrow { - display: inline-block; - width: 18px; - height: 100%; - position: absolute; - right: 0; - top: 0; - - border-left: 1px solid #aaa; - border-radius: 0 4px 4px 0; - - background-clip: padding-box; - - background: #ccc; - background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee)); - background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%); - background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#cccccc', GradientType = 0); - background-image: linear-gradient(top, #ccc 0%, #eee 60%); -} - -.select2-container .select2-choice .select2-arrow b { - display: block; - width: 100%; - height: 100%; - background: url('select2.png') no-repeat 0 1px; -} - -.select2-search { - display: inline-block; - width: 100%; - min-height: 26px; - margin: 0; - padding-left: 4px; - padding-right: 4px; - - position: relative; - z-index: 10000; - - white-space: nowrap; -} - -.select2-search input { - width: 100%; - height: auto !important; - min-height: 26px; - padding: 4px 20px 4px 5px; - margin: 0; - - outline: 0; - font-family: sans-serif; - font-size: 1em; - - border: 1px solid #aaa; - border-radius: 0; - - -webkit-box-shadow: none; - box-shadow: none; - - background: #fff url('select2.png') no-repeat 100% -22px; - background: url('select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee)); - background: url('select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%); - background: url('select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%); - background: url('select2.png') no-repeat 100% -22px, linear-gradient(top, #fff 85%, #eee 99%); -} - -.select2-drop.select2-drop-above .select2-search input { - margin-top: 4px; -} - -.select2-search input.select2-active { - background: #fff url('select2-spinner.gif') no-repeat 100%; - background: url('select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee)); - background: url('select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%); - background: url('select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%); - background: url('select2-spinner.gif') no-repeat 100%, linear-gradient(top, #fff 85%, #eee 99%); -} - -.select2-container-active .select2-choice, -.select2-container-active .select2-choices { - border: 1px solid #5897fb; - outline: none; - - -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3); - box-shadow: 0 0 5px rgba(0, 0, 0, .3); -} - -.select2-dropdown-open .select2-choice { - border-bottom-color: transparent; - -webkit-box-shadow: 0 1px 0 #fff inset; - box-shadow: 0 1px 0 #fff inset; - - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - - background-color: #eee; - background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fff), color-stop(0.5, #eee)); - background-image: -webkit-linear-gradient(center bottom, #fff 0%, #eee 50%); - background-image: -moz-linear-gradient(center bottom, #fff 0%, #eee 50%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0); - background-image: linear-gradient(top, #fff 0%, #eee 50%); -} - -.select2-dropdown-open.select2-drop-above .select2-choice, -.select2-dropdown-open.select2-drop-above .select2-choices { - border: 1px solid #5897fb; - border-top-color: transparent; - - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.5, #eee)); - background-image: -webkit-linear-gradient(center top, #fff 0%, #eee 50%); - background-image: -moz-linear-gradient(center top, #fff 0%, #eee 50%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0); - background-image: linear-gradient(bottom, #fff 0%, #eee 50%); -} - -.select2-dropdown-open .select2-choice .select2-arrow { - background: transparent; - border-left: none; - filter: none; -} -.select2-dropdown-open .select2-choice .select2-arrow b { - background-position: -18px 1px; -} - -/* results */ -.select2-results { - max-height: 200px; - padding: 0 0 0 4px; - margin: 4px 4px 4px 0; - position: relative; - overflow-x: hidden; - overflow-y: auto; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - -.select2-results ul.select2-result-sub { - margin: 0; - padding-left: 0; -} - -.select2-results ul.select2-result-sub > li .select2-result-label { padding-left: 20px } -.select2-results ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 40px } -.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 60px } -.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 80px } -.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 100px } -.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 110px } -.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 120px } - -.select2-results li { - list-style: none; - display: list-item; - background-image: none; -} - -.select2-results li.select2-result-with-children > .select2-result-label { - font-weight: bold; -} - -.select2-results .select2-result-label { - padding: 3px 7px 4px; - margin: 0; - cursor: pointer; - - min-height: 1em; - - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.select2-results .select2-highlighted { - background: #3875d7; - color: #fff; -} - -.select2-results li em { - background: #feffde; - font-style: normal; -} - -.select2-results .select2-highlighted em { - background: transparent; -} - -.select2-results .select2-highlighted ul { - background: #fff; - color: #000; -} - - -.select2-results .select2-no-results, -.select2-results .select2-searching, -.select2-results .select2-selection-limit { - background: #f4f4f4; - display: list-item; -} - -/* -disabled look for disabled choices in the results dropdown -*/ -.select2-results .select2-disabled.select2-highlighted { - color: #666; - background: #f4f4f4; - display: list-item; - cursor: default; -} -.select2-results .select2-disabled { - background: #f4f4f4; - display: list-item; - cursor: default; -} - -.select2-results .select2-selected { - display: none; -} - -.select2-more-results.select2-active { - background: #f4f4f4 url('select2-spinner.gif') no-repeat 100%; -} - -.select2-more-results { - background: #f4f4f4; - display: list-item; -} - -/* disabled styles */ - -.select2-container.select2-container-disabled .select2-choice { - background-color: #f4f4f4; - background-image: none; - border: 1px solid #ddd; - cursor: default; -} - -.select2-container.select2-container-disabled .select2-choice .select2-arrow { - background-color: #f4f4f4; - background-image: none; - border-left: 0; -} - -.select2-container.select2-container-disabled .select2-choice abbr { - display: none; -} - - -/* multiselect */ - -.select2-container-multi .select2-choices { - height: auto !important; - height: 1%; - margin: 0; - padding: 0; - position: relative; - - /*border: 1px solid #aaa;*/ - cursor: text; - overflow: hidden; - - background-color: #fff; -/* background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eee), color-stop(15%, #fff)); - background-image: -webkit-linear-gradient(top, #eee 1%, #fff 15%); - background-image: -moz-linear-gradient(top, #eee 1%, #fff 15%); - background-image: linear-gradient(top, #eee 1%, #fff 15%);*/ -} - -.select2-locked { - padding: 3px 5px 3px 5px !important; -} - -.select2-container-multi .select2-choices { - min-height: 26px; -} - -.select2-container-multi.select2-container-active .select2-choices { - border: 1px solid #5897fb; - outline: none; - - -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3); - box-shadow: 0 0 5px rgba(0, 0, 0, .3); -} -.select2-container-multi .select2-choices li { - float: left; - list-style: none; -} -.select2-container-multi .select2-choices .select2-search-field { - margin: 0; - padding: 0; - white-space: nowrap; -} - -.select2-container-multi .select2-choices .select2-search-field input { - padding: 5px; - margin: 1px 0; - - font-family: sans-serif; - font-size: 100%; - color: #666; - outline: 0; - border: 0; - -webkit-box-shadow: none; - box-shadow: none; - background: transparent !important; -} - -.select2-container-multi .select2-choices .select2-search-field input.select2-active { - background: #fff url('select2-spinner.gif') no-repeat 100% !important; -} - -.select2-default { - color: #999 !important; -} - -.select2-container-multi .select2-choices .select2-search-choice { - padding: 3px 5px 3px 18px; - margin: 3px 0 3px 5px; - position: relative; - - line-height: 13px; - color: #333; - cursor: default; - border: 1px solid #aaaaaa; - - border-radius: 3px; - - -webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05); - box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05); - - background-clip: padding-box; - - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - - background-color: #e4e4e4; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0); - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eee)); - background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%); - background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%); - background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%); -} -.select2-container-multi .select2-choices .select2-search-choice .select2-chosen { - cursor: default; -} -.select2-container-multi .select2-choices .select2-search-choice-focus { - background: #d4d4d4; -} - -.select2-search-choice-close { - display: block; - width: 12px; - height: 13px; - position: absolute; - right: 3px; - top: 2px; - font-size: 1px; - outline: none; -} - -.select2-container-multi .select2-search-choice-close { - left: 1px; -} - -.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover { - background-position: right -11px; -} -.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close { - background-position: right -11px; -} - -/* disabled styles */ -.select2-container-multi.select2-container-disabled .select2-choices { - background-color: #f4f4f4; - background-image: none; - border: 1px solid #ddd; - cursor: default; -} - -.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice { - padding: 3px 5px 3px 5px; - border: 1px solid #ddd; - background-image: none; - background-color: #f4f4f4; -} - -.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close { display: none; - background: none; -} -/* end multiselect */ - - -.select2-result-selectable .select2-match, -.select2-result-unselectable .select2-match { - text-decoration: underline; -} - -.select2-offscreen, .select2-offscreen:focus { - clip: rect(0 0 0 0) !important; - width: 1px !important; - height: 1px !important; - border: 0 !important; - margin: 0 !important; - padding: 0 !important; - overflow: hidden !important; - position: absolute !important; - outline: 0 !important; - left: 0px !important; - top: 0px !important; -} - -.select2-display-none { - display: none; -} - -.select2-measure-scrollbar { - position: absolute; - top: -10000px; - left: -10000px; - width: 100px; - height: 100px; - overflow: scroll; -} diff --git a/js/app/app.js b/js/app/app.js index d9cd3b1f..b5d793f0 100644 --- a/js/app/app.js +++ b/js/app/app.js @@ -19,6 +19,12 @@ * */ +$('#content.app-tasks').attr('ng-app', 'Tasks'); +$('#content.app-tasks').attr('ng-cloak'); +$('#content.app-tasks').attr('ng-controller', 'AppController'); +$('#content.app-tasks').attr('ng-click', 'closeAll($event)'); +$('#content.app-tasks').attr('class', 'handler'); + angular.module('Tasks', ['ngRoute', 'ngAnimate', 'ui.select', 'ngSanitize', 'dndLists']).config([ '$provide', '$routeProvider', '$interpolateProvider', '$httpProvider', function($provide, $routeProvider, $interpolateProvider, $httpProvider) { diff --git a/templates/main.php b/templates/main.php index eea0aae1..b116f7b6 100644 --- a/templates/main.php +++ b/templates/main.php @@ -1,283 +1,274 @@ <?php script('tasks', 'merged'); style('tasks', 'style'); - style('tasks', 'vendor/angularui/ui-select/select2'); ?> -<div id="app" - ng-app="Tasks" - ng-cloak - ng-controller="AppController" - ng-click="closeAll($event)" - class="handler" - data-appVersion="<?php p($_['appVersion']); ?>"> - <div id="app-navigation" ng-controller="ListController"> - <ul id="collections"> - <li id="collection_{{ collection.id }}" - class="collection {{ collection.icon }} reactive" - collectionID="{{collection.id}}" - ng-repeat="collection in collections" - ng-class="{'animate-up': hideCollection(collection.id), active: collection.id==route.collectionID}" - dnd-list="draggedTasks" - dnd-drop="dropCollection(event, index, item)" - dnd-dragover="dragoverCollection(event, index)"> - <a href="#/collections/{{ collection.id }}" class="sprite"> - <span class="date" ng-if="collection.id=='today'"><?php p($_['DOM']); ?></span> - <span class="title">{{ collection.displayname }}</span> - </a> - <div class="app-navigation-entry-utils"> - <ul> - <li class="app-navigation-entry-utils-counter">{{ getCollectionString(collection.id) | counterFormatter }}</li> - </ul> - </div> - </li> - <li id="list_{{ calendar.uri }}" - class="list with-menu handler editing" - calendarID="{{calendar.uri}}" - ng-repeat="calendar in calendars" - ng-class="{ active: calendar.uri==route.calendarID, edit:route.listparameter == 'name' && route.calendarID == calendar.uri, - caldav: route.listparameter == 'caldav' && route.calendarID == calendar.uri}" - dnd-list="draggedTasks" - dnd-drop="dropList(event, index, item)" - dnd-dragover="dragoverList(event, index)"> - <div class="app-navigation-entry-bullet" style="background-color: {{ calendar.color }};"></div> - <a href="#/calendars/{{ calendar.uri }}" ng-dblclick="startRename(calendar)"> - <span class="title">{{ calendar.displayname }}</span> - </a> - <div class="app-navigation-entry-utils"> - <ul> - <li class="app-navigation-entry-utils-counter">{{ getListCount(calendar.uri,'all') | counterFormatter }}</li> - <li class="app-navigation-entry-utils-menu-button" ng-show="calendar.writable"><button></button></li> - </ul> - </div> - <div class="app-navigation-entry-menu" ng-show="calendar.writable"> - <ul> - <li> - <a ng-click="startEdit(calendar)"> - <span class="icon-rename"></span> - <span><?php p($l->t('Edit')); ?></span> - </a> - </li> - <li> - <a ng-click="showCalDAVUrl(calendar)"> - <span class="icon-public"></span> - <span><?php p($l->t('Link')); ?></span> - </a> - </li> - <li> - <a href="{{calendar.exportUrl}}" download="{{calendar.uri}}.ics"> - <span class="icon-download"></span> - <span><?php p($l->t('Download')); ?></span> - </a> - </li> - <li confirmation="delete(calendar)" confirmation-message="deleteMessage(calendar)"> - </li> - </ul> - </div> - <div class="app-navigation-entry-edit name" ng-class="{error: nameError}"> - <form> - <input ng-model="calendar.displayname" - class="edit hasTooltip" - type="text" - ng-keyup="checkEdit($event,calendar)" - autofocus-on-insert> - <input type="cancel" - value="" - class="action icon-close" - ng-click="cancelEdit(calendar)" - title="<?php p($l->t('Cancel')); ?>"> - <input type="submit" - value="" - class="action icon-checkmark" - ng-click="saveEdit(calendar)" - title="<?php p($l->t('Save')); ?>"> - </form> - <colorpicker class="colorpicker" - selected="calendar.color"> - </colorpicker> - </div> - <div class="app-navigation-entry-edit caldav"> - <form> - <input class="caldav" - ng-value="calendar.caldav" - readonly - type="text"/> - <input type="cancel" - value="" - class="action icon-close" - ng-click="hideCalDAVUrl()" - title="<?php p($l->t('Cancel')); ?>"> - </form> - </div> - </li> - <li class="newList handler icon-add reactive editing" ng-class="{edit: status.addingList}"> - <a class="addlist icon sprite" - ng-click="startCreate()" - oc-click-focus="{selector: '#newList', timeout: 0}"> - <span class="title"><?php p($l->t('Add List...')); ?></span> - </a> - <div class="app-navigation-entry-edit name" ng-class="{error: nameError}"> - <form ng-disabled="isAddingList"> - <input id="newList" - ng-model="status.newListName" - class="edit hasTooltip" - type="text" - autofocus-on-insert - placeholder="<?php p($l->t('New List')); ?>" - ng-keyup="checkNew($event,status.newListName)"> - <input type="cancel" - value="" - class="action icon-close" - ng-click="cancelCreate()" - title="<?php p($l->t('Cancel')); ?>"> - <input type="submit" - value="" - class="action icon-checkmark" - ng-click="create($event)" - title="<?php p($l->t('Save')); ?>"> - </form> - <colorpicker class="colorpicker" selected="color"></colorpicker> - </div> - </li> - </ul> - <div id="app-settings" ng-controller="SettingsController"> - <div id="app-settings-header"> - <button class="settings-button" data-apps-slide-toggle="#app-settings-content"> - <span><?php p($l->t('Settings')); ?></span> - </button> - </div> - <div id="app-settings-content"> +<div id="app-navigation" ng-controller="ListController"> + <ul id="collections"> + <li id="collection_{{ collection.id }}" + class="collection {{ collection.icon }} reactive" + collectionID="{{collection.id}}" + ng-repeat="collection in collections" + ng-class="{'animate-up': hideCollection(collection.id), active: collection.id==route.collectionID}" + dnd-list="draggedTasks" + dnd-drop="dropCollection(event, index, item)" + dnd-dragover="dragoverCollection(event, index)"> + <a href="#/collections/{{ collection.id }}" class="sprite"> + <span class="date" ng-if="collection.id=='today'"><?php p($_['DOM']); ?></span> + <span class="title">{{ collection.displayname }}</span> + </a> + <div class="app-navigation-entry-utils"> <ul> - <li> - <label for="startOfWeek"><?php p($l->t('Start of week')); ?></label> - <select id="startOfWeek" - ng-change="setStartOfWeek()" - ng-model="settingsmodel.getById('various').startOfWeek" - ng-options="startOfWeekOption.id as startOfWeekOption.name for startOfWeekOption in startOfWeekOptions"> - </select> - </li> - <li class="headline"> - <?php p($l->t('Visibility of Smart Collections')); ?> - </li> - <li ng-repeat="collection in collections"> - <div class="label-container"> - <span class="icon {{ collection.icon }}"> - <text ng-show="collection.id=='today'"><?php p($_['DOM']); ?></text> - </span> - <label for="visibilityCollection-{{collection.id}}" class="title">{{ collection.displayname }}</label> - </div> - <select id="visibilityCollection-{{collection.id}}" - ng-change="setVisibility(collection.id)" - ng-model="collection.show" - ng-options="collectionOption.id as collectionOption.name for collectionOption in collectionOptions"> - </select> - </li> + <li class="app-navigation-entry-utils-counter">{{ getCollectionString(collection.id) | counterFormatter }}</li> </ul> </div> - </div> - </div> - - <div id="app-content" - ng-controller="TasksController" - ng-class="{'with-app-sidebar':route.taskID}"> - <div class="content-wrapper"> - <div id="add-task" - class="add-task handler" - ng-show="showInput()" - ng-class="{'focus':status.focusTaskInput}"> - <form ng-submit="addTask(status.taskName)" name="addTaskForm"> - <input id="target" - ng-disabled="isAddingTask" - ng-click="focusTaskInput()" - class="transparent" - placeholder="{{ getAddString() }}" - ng-model="status.taskName" - ng-keydown="checkTaskInput($event)"/> - </form> - </div> + </li> + <li id="list_{{ calendar.uri }}" + class="list with-menu handler editing" + calendarID="{{calendar.uri}}" + ng-repeat="calendar in calendars" + ng-class="{ active: calendar.uri==route.calendarID, edit:route.listparameter == 'name' && route.calendarID == calendar.uri, + caldav: route.listparameter == 'caldav' && route.calendarID == calendar.uri}" + dnd-list="draggedTasks" + dnd-drop="dropList(event, index, item)" + dnd-dragover="dragoverList(event, index)"> + <div class="app-navigation-entry-bullet" style="background-color: {{ calendar.color }};"></div> + <a href="#/calendars/{{ calendar.uri }}" ng-dblclick="startRename(calendar)"> + <span class="title">{{ calendar.displayname }}</span> + </a> <div class="app-navigation-entry-utils"> - <div class="app-navigation-entry-utils-menu-button" title="<?php p($l->t('Change sort order')); ?>"> - <button class="sortorder-dropdown-button"> - <span class="icon" ng-class="getSortOrderIcon()"></span> - <span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span> - </button> - </div> + <ul> + <li class="app-navigation-entry-utils-counter">{{ getListCount(calendar.uri,'all') | counterFormatter }}</li> + <li class="app-navigation-entry-utils-menu-button" ng-show="calendar.writable"><button></button></li> + </ul> </div> - <div class="app-navigation-entry-menu bubble sortorder-dropdown"> + <div class="app-navigation-entry-menu" ng-show="calendar.writable"> <ul> - <li ng-click="setSortOrder($event, 'default')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'default'}" class="handler"> - <a> - <span class="icon icon-menu"></span> - <span class="label"><?php p($l->t('Default')); ?></span> - <span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span> - </a> - </li> - <li ng-click="setSortOrder($event, 'due')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'due'}"> - <a> - <span class="icon icon-calendar"></span> - <span class="label"><?php p($l->t('Due date')); ?></span> - <span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span> + <li> + <a ng-click="startEdit(calendar)"> + <span class="icon-rename"></span> + <span><?php p($l->t('Edit')); ?></span> </a> </li> - <li ng-click="setSortOrder($event, 'start')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'start'}"> - <a> - <span class="icon icon-calendar"></span> - <span class="label"><?php p($l->t('Start date')); ?></span> - <span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span> + <li> + <a ng-click="showCalDAVUrl(calendar)"> + <span class="icon-public"></span> + <span><?php p($l->t('Link')); ?></span> </a> </li> - <li ng-click="setSortOrder($event, 'priority')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'priority'}"> - <a> - <span class="icon icon-task-star"></span> - <span class="label"><?php p($l->t('Priority')); ?></span> - <span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span> + <li> + <a href="{{calendar.exportUrl}}" download="{{calendar.uri}}.ics"> + <span class="icon-download"></span> + <span><?php p($l->t('Download')); ?></span> </a> </li> - <li ng-click="setSortOrder($event, 'alphabetically')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'alphabetically'}"> - <a> - <span class="icon icon-alphabetically"></span> - <span class="label"><?php p($l->t('Alphabetically')); ?></span> - <span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span> - </a> + <li confirmation="delete(calendar)" confirmation-message="deleteMessage(calendar)"> </li> -<!-- <li ng-click="setSortOrder($event, 'manual')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'manual'}"> - <a> - <span class="icon icon-manual"></span> - <span class="label"><?php p($l->t('Manually')); ?></span> - <span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span> - </a> - </li> --> </ul> </div> - <div class="task-list"> - <?php print_unescaped($this->inc('part.tasklist')); ?> - <?php print_unescaped($this->inc('part.collectionall')); ?> - <?php print_unescaped($this->inc('part.collectionweek')); ?> - <div id="searchresults"></div> - <div class="task-item template"> - <div class="task-body"> - <div class="percentdone"></div> - <a class="task-checkbox" name="toggleCompleted" ng-click="toggleCompleted()"> - <span class="icon task-checkbox"></span> - </a> - <a class="icon task-separator"></a> - <a class="task-star" ng-click="toggleStarred(task.id)"> - <span class="icon task-star faded"></span> - </a> - <a class="duedate" ng-class="{overdue: TasksModel.overdue(task.due)}">{{ task.due | dateTaskList }}</a> - <div class="title-wrapper"> - <span class="title"></span> - <span class="icon task-attachment"></span> - </div> + <div class="app-navigation-entry-edit name" ng-class="{error: nameError}"> + <form> + <input ng-model="calendar.displayname" + class="edit hasTooltip" + type="text" + ng-keyup="checkEdit($event,calendar)" + autofocus-on-insert> + <input type="cancel" + value="" + class="action icon-close" + ng-click="cancelEdit(calendar)" + title="<?php p($l->t('Cancel')); ?>"> + <input type="submit" + value="" + class="action icon-checkmark" + ng-click="saveEdit(calendar)" + title="<?php p($l->t('Save')); ?>"> + </form> + <colorpicker class="colorpicker" + selected="calendar.color"> + </colorpicker> + </div> + <div class="app-navigation-entry-edit caldav"> + <form> + <input class="caldav" + ng-value="calendar.caldav" + readonly + type="text"/> + <input type="cancel" + value="" + class="action icon-close" + ng-click="hideCalDAVUrl()" + title="<?php p($l->t('Cancel')); ?>"> + </form> + </div> + </li> + <li class="newList handler icon-add reactive editing" ng-class="{edit: status.addingList}"> + <a class="addlist icon sprite" + ng-click="startCreate()" + oc-click-focus="{selector: '#newList', timeout: 0}"> + <span class="title"><?php p($l->t('Add List...')); ?></span> + </a> + <div class="app-navigation-entry-edit name" ng-class="{error: nameError}"> + <form ng-disabled="isAddingList"> + <input id="newList" + ng-model="status.newListName" + class="edit hasTooltip" + type="text" + autofocus-on-insert + placeholder="<?php p($l->t('New List')); ?>" + ng-keyup="checkNew($event,status.newListName)"> + <input type="cancel" + value="" + class="action icon-close" + ng-click="cancelCreate()" + title="<?php p($l->t('Cancel')); ?>"> + <input type="submit" + value="" + class="action icon-checkmark" + ng-click="create($event)" + title="<?php p($l->t('Save')); ?>"> + </form> + <colorpicker class="colorpicker" selected="color"></colorpicker> + </div> + </li> + </ul> + <div id="app-settings" ng-controller="SettingsController"> + <div id="app-settings-header"> + <button class="settings-button" data-apps-slide-toggle="#app-settings-content"> + <span><?php p($l->t('Settings')); ?></span> + </button> + </div> + <div id="app-settings-content"> + <ul> + <li> + <label for="startOfWeek"><?php p($l->t('Start of week')); ?></label> + <select id="startOfWeek" + ng-change="setStartOfWeek()" + ng-model="settingsmodel.getById('various').startOfWeek" + ng-options="startOfWeekOption.id as startOfWeekOption.name for startOfWeekOption in startOfWeekOptions"> + </select> + </li> + <li class="headline"> + <?php p($l->t('Visibility of Smart Collections')); ?> + </li> + <li ng-repeat="collection in collections"> + <div class="label-container"> + <span class="icon {{ collection.icon }}"> + <text ng-show="collection.id=='today'"><?php p($_['DOM']); ?></text> + </span> + <label for="visibilityCollection-{{collection.id}}" class="title">{{ collection.displayname }}</label> </div> - </div> + <select id="visibilityCollection-{{collection.id}}" + ng-change="setVisibility(collection.id)" + ng-model="collection.show" + ng-options="collectionOption.id as collectionOption.name for collectionOption in collectionOptions"> + </select> + </li> + </ul> + </div> + </div> +</div> + +<div id="app-content" + ng-controller="TasksController" + ng-class="{'with-app-sidebar':route.taskID}"> + <div class="content-wrapper"> + <div id="add-task" + class="add-task handler" + ng-show="showInput()" + ng-class="{'focus':status.focusTaskInput}"> + <form ng-submit="addTask(status.taskName)" name="addTaskForm"> + <input id="target" + ng-disabled="isAddingTask" + ng-click="focusTaskInput()" + class="transparent" + placeholder="{{ getAddString() }}" + ng-model="status.taskName" + ng-keydown="checkTaskInput($event)"/> + </form> + </div> + <div class="app-navigation-entry-utils"> + <div class="app-navigation-entry-utils-menu-button" title="<?php p($l->t('Change sort order')); ?>"> + <button class="sortorder-dropdown-button"> + <span class="icon" ng-class="getSortOrderIcon()"></span> + <span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span> + </button> </div> </div> - <div id="app-sidebar" ng-class="{'disappear':!route.taskID}"> - <?php print_unescaped($this->inc('part.details')); ?> + <div class="app-navigation-entry-menu bubble sortorder-dropdown"> + <ul> + <li ng-click="setSortOrder($event, 'default')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'default'}" class="handler"> + <a> + <span class="icon icon-menu"></span> + <span class="label"><?php p($l->t('Default')); ?></span> + <span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span> + </a> + </li> + <li ng-click="setSortOrder($event, 'due')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'due'}"> + <a> + <span class="icon icon-calendar"></span> + <span class="label"><?php p($l->t('Due date')); ?></span> + <span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span> + </a> + </li> + <li ng-click="setSortOrder($event, 'start')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'start'}"> + <a> + <span class="icon icon-calendar"></span> + <span class="label"><?php p($l->t('Start date')); ?></span> + <span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span> + </a> + </li> + <li ng-click="setSortOrder($event, 'priority')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'priority'}"> + <a> + <span class="icon icon-task-star"></span> + <span class="label"><?php p($l->t('Priority')); ?></span> + <span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span> + </a> + </li> + <li ng-click="setSortOrder($event, 'alphabetically')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'alphabetically'}"> + <a> + <span class="icon icon-alphabetically"></span> + <span class="label"><?php p($l->t('Alphabetically')); ?></span> + <span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span> + </a> + </li> +<!-- <li ng-click="setSortOrder($event, 'manual')" ng-class="{active: settingsmodel.getById('various').sortOrder == 'manual'}"> + <a> + <span class="icon icon-manual"></span> + <span class="label"><?php p($l->t('Manually')); ?></span> + <span class="icon sort-indicator" ng-class="{'icon-sort-up': settingsmodel.getById('various').sortDirection, 'icon-sort-down': !settingsmodel.getById('various').sortDirection}"></span> + </a> + </li> --> + </ul> + </div> + <div class="task-list"> + <?php print_unescaped($this->inc('part.tasklist')); ?> + <?php print_unescaped($this->inc('part.collectionall')); ?> + <?php print_unescaped($this->inc('part.collectionweek')); ?> + <div id="searchresults"></div> + <div class="task-item template"> + <div class="task-body"> + <div class="percentdone"></div> + <a class="task-checkbox" name="toggleCompleted" ng-click="toggleCompleted()"> + <span class="icon task-checkbox"></span> + </a> + <a class="icon task-separator"></a> + <a class="task-star" ng-click="toggleStarred(task.id)"> + <span class="icon task-star faded"></span> + </a> + <a class="duedate" ng-class="{overdue: TasksModel.overdue(task.due)}">{{ task.due | dateTaskList }}</a> + <div class="title-wrapper"> + <span class="title"></span> + <span class="icon task-attachment"></span> + </div> + </div> + </div> </div> </div> - <script type="text/ng-template" id="part.taskbody"> - <?php print_unescaped($this->inc('part.taskbody')); ?> - </script> </div> +<div id="app-sidebar" ng-class="{'disappear':!route.taskID}"> + <?php print_unescaped($this->inc('part.details')); ?> +</div> +<script type="text/ng-template" id="part.taskbody"> + <?php print_unescaped($this->inc('part.taskbody')); ?> +</script> |