diff options
author | Bernhard Posselt <dev@bernhard-posselt.com> | 2014-08-26 18:51:06 +0200 |
---|---|---|
committer | Bernhard Posselt <dev@bernhard-posselt.com> | 2014-08-26 18:51:06 +0200 |
commit | 6711caea1c5fc341131cd530aecbcc2560ce436d (patch) | |
tree | a023faee2d56c874a3f289194e5379e22560d2a6 | |
parent | 82cad29394e8db1b3d2615adefd42dd0f9bf2958 (diff) |
better actions for navigation entries
-rw-r--r-- | css/navigation.css | 13 | ||||
-rw-r--r-- | css/oc8.css | 137 | ||||
-rw-r--r-- | img/actions/more.svg | 5 | ||||
-rw-r--r-- | templates/main.php | 1 | ||||
-rw-r--r-- | templates/part.listfeed.php | 28 |
5 files changed, 165 insertions, 19 deletions
diff --git a/css/navigation.css b/css/navigation.css index 21eb44f64..a7ddc359c 100644 --- a/css/navigation.css +++ b/css/navigation.css @@ -196,19 +196,6 @@ text-transform: none; } -.unread-counter { - padding: 8px 6px 8px 5px; - overflow: hidden; - text-overflow: ellipsis; - text-align: center; - font-size: 9pt; - display: none; -} - - -.unread .unread-counter { - display: block; -} .starred .unread-counter { font-weight: normal !important; } diff --git a/css/oc8.css b/css/oc8.css new file mode 100644 index 000000000..27b75dbef --- /dev/null +++ b/css/oc8.css @@ -0,0 +1,137 @@ +/** + * App navigation utils, buttons and counters for drop down menu + */ +.app-navigation-entry-utils { + position: absolute; + top: 0; + right: 0; + bottom: 0; + z-index: 105; +} + + .app-navigation-entry-utils ul { + float: right; + display: block !important; + } + + + .app-navigation-entry-utils li { + float: left; + width: 44px !important; + height: 44px; + line-height: 44px; + display: none; + } + + .active > .app-navigation-entry-utils li { + display: inline-block; + } + + .app-navigation-entry-utils button { + height: 38px; + width: 38px; + line-height: 38px; + float: left; + } + + .app-navigation-entry-utils-menu-button { + border: 0; + opacity: .7; + background-color: transparent; + background-repeat: no-repeat; + background-position: center; + background-image: url('../img/actions/more.svg'); + } + + .app-navigation-entry-utils-menu-button:hover, + .app-navigation-entry-utils-menu-button:focus { + background-color: transparent; + opacity: 1; + } + + .app-navigation-entry-utils-counter { + overflow: hidden; + text-overflow: ellipsis; + text-align: right; + font-size: 9pt; + width: 38px; + line-height: 44px; + padding: 0 10px; + } + +.app-navigation-entry-utils ul, +.app-navigation-entry-options ul { + list-style-type: none; +} + +.app-navigation-entry-options { + display: none; + position: absolute; + background-color: #eee; + color: #333; + border-radius: 3px; + z-index: 110; + margin: -5px 10px; + right: 0; + border: 1px solid #bbb; + -webkit-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75)); + -moz-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75)); + -ms-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75)); + -o-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75)); + filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75)); +} + +/* miraculous border arrow stuff */ +.app-navigation-entry-options:after, .app-navigation-entry-options:before { + bottom: 100%; + right: 5px; /* change this to adjust the arrow position */ + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} + +.app-navigation-entry-options:after { + border-color: rgba(238, 238, 238, 0); + border-bottom-color: #eee; + border-width: 10px; + margin-left: -10px; +} +.app-navigation-entry-options:before { + border-color: rgba(187, 187, 187, 0); + border-bottom-color: #bbb; + border-width: 11px; + margin-left: -11px; +} + +.app-navigation-entry-options.app-navigation-entry-options-open { + display: block; +} + +/* list of options for an entry */ +.app-navigation-entry-options ul { + display: block !important; +} + +.app-navigation-entry-options li { + float: left; + width: 38px !important; +} + +.app-navigation-entry-options li button { + float: right; + width: 36px !important; + height: 36px; + line-height: 36px; + border: 0; + opacity: .7; + background-color: transparent; +} + +.app-navigation-entry-options li button:hover, +.app-navigation-entry-options li button:focus { + opacity: 1; + background-color: transparent; +}
\ No newline at end of file diff --git a/img/actions/more.svg b/img/actions/more.svg new file mode 100644 index 000000000..9ab5d4243 --- /dev/null +++ b/img/actions/more.svg @@ -0,0 +1,5 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.0" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/"> + <rect style="color:#000000" fill-opacity="0" height="97.986" width="163.31" y="-32.993" x="-62.897"/> + <path d="m3 6c-1.1046 0-2 0.8954-2 2s0.8954 2 2 2 2-0.8954 2-2-0.8954-2-2-2zm5 0c-1.1046 0-2 0.8954-2 2s0.8954 2 2 2 2-0.8954 2-2-0.8954-2-2-2zm5 0c-1.105 0-2 0.8954-2 2s0.895 2 2 2 2-0.8954 2-2-0.895-2-2-2z" fill-rule="evenodd"/> +</svg> diff --git a/templates/main.php b/templates/main.php index 9185eb2f7..b0b450493 100644 --- a/templates/main.php +++ b/templates/main.php @@ -10,6 +10,7 @@ \OCP\Util::addStyle('news', 'bootstrap/tooltip'); \OCP\Util::addStyle('news', 'app'); +\OCP\Util::addStyle('news', 'oc8'); \OCP\Util::addStyle('news', 'navigation'); \OCP\Util::addStyle('news', 'content'); \OCP\Util::addStyle('news', 'settings'); diff --git a/templates/part.listfeed.php b/templates/part.listfeed.php index 4024db31b..964d2f7e2 100644 --- a/templates/part.listfeed.php +++ b/templates/part.listfeed.php @@ -44,18 +44,34 @@ {{ feed.title }} </a> - <span class="utils"> + <div class="app-navigation-entry-utils"> + <ul> + <li class="app-navigation-entry-utils-counter" + ng-show="feed.id && Navigation.getUnreadCount(feed.id) > 0 && !feed.error && !feed.editing"> + {{ Navigation.getFeedUnreadCount(feed.id) | unreadCountFormatter }} + </li> + <li><button class="app-navigation-entry-utils-menu-button" ng-click="optionsId = (optionsId == feed.id ? -1 : feed.id)"></button></li> + </ul> + </div> + + <div class="app-navigation-entry-options" ng-class="{'app-navigation-entry-options-open': optionsId == feed.id}"> + <ul> + <li><button class="icon-rename" title="<?php p($l->t('Rename feed')); ?>"></button></li> + <li><button class="icon-delete" title="<?php p($l->t('Delete website')); ?>"></button></li> + </ul> + </div> + + <!--<span class="utils"> + <span class="unread-counter" + > + </span>--> <!--<button ng-click="Navigation.deleteFeed(feed.id)" class="svg action delete-icon delete-button" title="<?php p($l->t('Delete website')); ?>" ng-show="feed.id && !feed.editing && !feed.error" oc-tooltip></button>--> - <span class="unread-counter" - ng-show="feed.id && Navigation.getUnreadCount(feed.id) > 0 && !feed.error && !feed.editing"> - {{ Navigation.getFeedUnreadCount(feed.id) | unreadCountFormatter }} - </span> <!-- <button class="svg action mark-read-icon" @@ -76,8 +92,8 @@ title="<?php p($l->t('Delete website')); ?>" ng-show="feed.error" oc-tooltip></button> - --> </span> + --> <div class="message" ng-show="feed.error">{{ feed.error }}</div> </li> |