From c4e74959a242ed8922fa01418c0e9e2bdcecd341 Mon Sep 17 00:00:00 2001 From: Aaron Boodman Date: Mon, 16 Dec 2013 18:55:38 -0800 Subject: [PATCH] New Navigation UI. I'm sure there's still lots of refinement that needs to be done here, but this seems like a good checkpoint. Change-Id: Ida808464c0cc40c84f7f79c016d3c6a148d50a32 --- server/camlistored/ui/blob_item.css | 5 +- server/camlistored/ui/blob_item_container.css | 5 + server/camlistored/ui/checkmark-black-25.png | Bin 876 -> 0 bytes server/camlistored/ui/checkmark-blue-25.png | Bin 894 -> 0 bytes server/camlistored/ui/checkmark.svg | 7 - server/camlistored/ui/checkmark2.svg | 72 +++++ server/camlistored/ui/checkmark2_blue.svg | 71 ++++ server/camlistored/ui/icon_10052.svg | 51 +++ server/camlistored/ui/icon_13864.svg | 54 ++++ server/camlistored/ui/icon_14727.svg | 78 +++++ server/camlistored/ui/icon_16716.svg | 58 ++++ server/camlistored/ui/icon_16981.svg | 55 ++++ server/camlistored/ui/icon_16981_down.svg | 55 ++++ server/camlistored/ui/icon_25337.svg | 49 +++ server/camlistored/ui/icon_27307.svg | 68 ++++ server/camlistored/ui/index.html | 4 +- server/camlistored/ui/index.js | 266 ++++++++------- server/camlistored/ui/magnifying_glass.svg | 73 +++++ server/camlistored/ui/nav.css | 129 ++++++++ server/camlistored/ui/nav.js | 216 +++++++++++++ server/camlistored/ui/nav_test.html | 39 +++ server/camlistored/ui/toolbar.css | 86 ----- server/camlistored/ui/toolbar.js | 302 ------------------ server/camlistored/ui/toolbar_test.html | 31 -- 24 files changed, 1228 insertions(+), 546 deletions(-) delete mode 100644 server/camlistored/ui/checkmark-black-25.png delete mode 100644 server/camlistored/ui/checkmark-blue-25.png delete mode 100644 server/camlistored/ui/checkmark.svg create mode 100644 server/camlistored/ui/checkmark2.svg create mode 100644 server/camlistored/ui/checkmark2_blue.svg create mode 100644 server/camlistored/ui/icon_10052.svg create mode 100644 server/camlistored/ui/icon_13864.svg create mode 100644 server/camlistored/ui/icon_14727.svg create mode 100644 server/camlistored/ui/icon_16716.svg create mode 100644 server/camlistored/ui/icon_16981.svg create mode 100644 server/camlistored/ui/icon_16981_down.svg create mode 100644 server/camlistored/ui/icon_25337.svg create mode 100644 server/camlistored/ui/icon_27307.svg create mode 100644 server/camlistored/ui/magnifying_glass.svg create mode 100644 server/camlistored/ui/nav.css create mode 100644 server/camlistored/ui/nav.js create mode 100644 server/camlistored/ui/nav_test.html delete mode 100644 server/camlistored/ui/toolbar.css delete mode 100644 server/camlistored/ui/toolbar.js delete mode 100644 server/camlistored/ui/toolbar_test.html diff --git a/server/camlistored/ui/blob_item.css b/server/camlistored/ui/blob_item.css index cb3320cd8..8d3cef62a 100644 --- a/server/camlistored/ui/blob_item.css +++ b/server/camlistored/ui/blob_item.css @@ -62,8 +62,9 @@ } .cam-blobitem .checkmark { - background-image: url('checkmark-black-25.png'); + background-image: url('checkmark2.svg'); background-repeat: no-repeat; + background-size: 100% 100%; cursor: pointer; height: 25px; left: 5px; @@ -91,5 +92,5 @@ } .cam-blobitem.goog-control-checked .checkmark { - background-image: url('checkmark-blue-25.png'); + background-image: url('checkmark2_blue.svg'); } diff --git a/server/camlistored/ui/blob_item_container.css b/server/camlistored/ui/blob_item_container.css index 89f402889..d99145f95 100644 --- a/server/camlistored/ui/blob_item_container.css +++ b/server/camlistored/ui/blob_item_container.css @@ -3,7 +3,12 @@ border: 1px solid rgba(0,0,0,0); position: relative; white-space: nowrap; + transition: -webkit-transform 75ms ease-out; + transition: -moz-transform 75ms ease-out; + transition: -ms-transform 75ms ease-out; + margin-left: 36px; } + .cam-blobitemcontainer.cam-dropactive { border-color: #acf; background: #e5efff; diff --git a/server/camlistored/ui/checkmark-black-25.png b/server/camlistored/ui/checkmark-black-25.png deleted file mode 100644 index 9ac8355c592e17fc1b92883f91af760adfc79e8f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 876 zcmV-y1C#uTP)P000>X1^@s6#OZ}&00001b5ch_0Itp) z=>Px#24YJ`L;wH)0002_L%V+f000SaNLh0L01ejw01ejxLMWSf00007bV*G`2i*z| z1_?PrQH3x700QhuL_t(Y$DNkXOB+!T$G^MTB&!KQz0^zXMet+{*hYev9$Q)pg`Psx zOAxF!|AlxGe;{>jst6t=N@x#WL=k!sYKbSQCh1xgQS;ag5(*Ujh`gn zkn~itCshDE0Pqn&NX*^b++cfq8%IY+C=?24Zf-_1Ru&?drDDwQ}oI!Z-RDjK(nq9`02 z8?%P*z7?R5%m|I4p&>`ctuj13Yy|C)bQvM9#meO5WL*FuudUazPbSgOT@XaRt$t1CU*WLZXQYiq^(6buHjwzh_*rX~PDDwRS! z9!IHEGU?^>dGWIa|1*HeWK!S7^71l;cg7tCgF#+iUg{pCQmLxhI6prx)V}LyvazwD zE9~v<>4p{-7AVVd8DM2)#Wvlywzf=XqLE~=SftG61U0kDbq)hNQ9Y8hMK0)?RMXp-ZL{Z<+aODg?Giu$jC@t#W9gcRIkF;ej=)| zs;Z8RH#9VGdV1QvpH%CNCnqQD>+7@ajQ#!nJUu-%0?tW3x~s>x0Z0RQSVxcF0q{za zq;F1MD=w0Qq8d0DKS;*Q&Y+qn4&PnB0h~E~cl`w_2wrFYi3fE60000P000>X1^@s6#OZ}&00001b5ch_0Itp) z=>Px#24YJ`L;wH)0002_L%V+f000SaNLh0L01ejw01ejxLMWSf00007bV*G`2i*z| z1`00fuTwMt00RC=L_t(Y$DNi+^JwL#D$@#3m1yoM#gloO$)_^Dfu~z0;Ngvw7B!$o0l`=jAt|N-uv$P z%{%9w|GA1NCL$i740s8Y0J%Uq@Dn%$yuc)|tdu$@9utuy5qT#f2NIj@i^y9Mxe?Bv z3In(cOaaB#-1#|dZ^Q91oSi{xDr9FvQ4u62y0(7$k`lv=$65s^EQZInYgX23|_smhhKmvN~ym_aN>;xSXj6o0AOhe=I8CVmX1J>J~ZzdoP#7qpj#m5Z${2n1pW6cj*rw*&b6SsxhC zezu)TF%950xZ)TSprb<XC-!SHbS!xG}}!~pgIGBe!?1$g=tT3R&7 z0$7{Z*CPV}va;;QABjOJF^h_{76k$@G6J2QIwYl~kdgxT?>hjW4~B*!1Co=Wu+XV| zBPfV?JX-7kc6Okz&xxyPIsmU11_z_plWDrtdD;LLfFpp~T4!-@5BmGv2g2*sUl|SH z@jy+DODGo&rPOcWgB8d6dS}D#E({F7_wTw6K7PDf5gHm?`F*dH3WTcgDqsSPkHg|( z{2EqK0ZmPpRXA)vvDA2S(j^a3LsVZ6<>gWONusK)DG2OfV0kF4x U8PQJX6951J07*qoM6N<$f-?n+00000 diff --git a/server/camlistored/ui/checkmark.svg b/server/camlistored/ui/checkmark.svg deleted file mode 100644 index 329e657f0..000000000 --- a/server/camlistored/ui/checkmark.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - \ No newline at end of file diff --git a/server/camlistored/ui/checkmark2.svg b/server/camlistored/ui/checkmark2.svg new file mode 100644 index 000000000..539745c08 --- /dev/null +++ b/server/camlistored/ui/checkmark2.svg @@ -0,0 +1,72 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/server/camlistored/ui/checkmark2_blue.svg b/server/camlistored/ui/checkmark2_blue.svg new file mode 100644 index 000000000..531ad35a2 --- /dev/null +++ b/server/camlistored/ui/checkmark2_blue.svg @@ -0,0 +1,71 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/server/camlistored/ui/icon_10052.svg b/server/camlistored/ui/icon_10052.svg new file mode 100644 index 000000000..878b45fbd --- /dev/null +++ b/server/camlistored/ui/icon_10052.svg @@ -0,0 +1,51 @@ + + + +image/svg+xml + + \ No newline at end of file diff --git a/server/camlistored/ui/icon_13864.svg b/server/camlistored/ui/icon_13864.svg new file mode 100644 index 000000000..2a31269a3 --- /dev/null +++ b/server/camlistored/ui/icon_13864.svg @@ -0,0 +1,54 @@ + +image/svg+xml + + + + + \ No newline at end of file diff --git a/server/camlistored/ui/icon_14727.svg b/server/camlistored/ui/icon_14727.svg new file mode 100644 index 000000000..9de78c1b7 --- /dev/null +++ b/server/camlistored/ui/icon_14727.svg @@ -0,0 +1,78 @@ + + + + + + + +image/svg+xml + + + + + + + + \ No newline at end of file diff --git a/server/camlistored/ui/icon_16716.svg b/server/camlistored/ui/icon_16716.svg new file mode 100644 index 000000000..1e5a81475 --- /dev/null +++ b/server/camlistored/ui/icon_16716.svg @@ -0,0 +1,58 @@ + +image/svg+xml + + + + + + \ No newline at end of file diff --git a/server/camlistored/ui/icon_16981.svg b/server/camlistored/ui/icon_16981.svg new file mode 100644 index 000000000..c2e49910d --- /dev/null +++ b/server/camlistored/ui/icon_16981.svg @@ -0,0 +1,55 @@ + +image/svg+xml + + + + + \ No newline at end of file diff --git a/server/camlistored/ui/icon_16981_down.svg b/server/camlistored/ui/icon_16981_down.svg new file mode 100644 index 000000000..7f3c295bc --- /dev/null +++ b/server/camlistored/ui/icon_16981_down.svg @@ -0,0 +1,55 @@ + +image/svg+xml + + + + + \ No newline at end of file diff --git a/server/camlistored/ui/icon_25337.svg b/server/camlistored/ui/icon_25337.svg new file mode 100644 index 000000000..a18c0b189 --- /dev/null +++ b/server/camlistored/ui/icon_25337.svg @@ -0,0 +1,49 @@ + +image/svg+xml + + \ No newline at end of file diff --git a/server/camlistored/ui/icon_27307.svg b/server/camlistored/ui/icon_27307.svg new file mode 100644 index 000000000..81278d3c7 --- /dev/null +++ b/server/camlistored/ui/icon_27307.svg @@ -0,0 +1,68 @@ + +image/svg+xml + + + + + + + + + + + + \ No newline at end of file diff --git a/server/camlistored/ui/index.html b/server/camlistored/ui/index.html index c641904f4..cea472816 100644 --- a/server/camlistored/ui/index.html +++ b/server/camlistored/ui/index.html @@ -22,9 +22,9 @@ - + - + + + + + + + + diff --git a/server/camlistored/ui/toolbar.css b/server/camlistored/ui/toolbar.css deleted file mode 100644 index 39eae1424..000000000 --- a/server/camlistored/ui/toolbar.css +++ /dev/null @@ -1,86 +0,0 @@ -.cam-toolbar { - align-items: stretch; - display: flex; - margin: 7px 7px 11px 7px; - outline: none!important; - position: relative; -} - -.cam-searchform { - display: inline; - display: flex; - flex-grow: 1; -} - -.cam-searchbox { - background: #f9f9f9; - border:1px solid #d3d3d3; - flex-grow: 1; - font-size: 1em; - margin: 0 0.5em 0 0; - padding: 6px; - transition-duration: 0.1s; - transition-property: background,border-color; - vertical-align: middle; - width: 250px; -} - -.cam-searchbox:hover { - background: #fafafa; - border:1px solid #b3b3b3; -} - -.cam-searchbox:focus { - background: white; - border:1px solid #999; - outline: none; -} - -.cam-toolbar>.goog-button { - background: #f9f9f9; - border-color: #e3e3e3 #b3b3b3 #b3b3b3 #e3e3e3!important; - border: 1px solid; - color: #666; - font-size: 0.8em; - margin: 0 0 0 0.5em; - padding: 0.5em 1em!important; - transition-duration: 0.1s; - transition-property: background,border-color; -} - -.cam-toolbar>.goog-button:hover, -.cam-toolbar>.goog-button:focus { - background: #fcfcfc; - border-color: #eee #939393 #939393 #eee!important; - outline: none; -} - -.cam-toolbar>.goog-button:active { - background: #f8f8f8; - border-color: #939393 #eee #eee #939393!important; - outline: none; -} - -.cam-toolbar>.goog-button.goog-button-disabled { - background: #f9f9f9; - border-color: #eee #ddd #ddd #eee!important; - color: #aaa; -} - -.cam-toolbar>.cam-smaller { - margin-right: 0!important; -} - -.cam-toolbar>.cam-bigger { - margin-left: 0!important; - border-left: none; -} - -.cam-toolbar-status { - position: absolute; - top: 100%; - margin-top: 2px; - right: 0; - color: #666; - font-size: 11px; -} diff --git a/server/camlistored/ui/toolbar.js b/server/camlistored/ui/toolbar.js deleted file mode 100644 index 45f91ed8d..000000000 --- a/server/camlistored/ui/toolbar.js +++ /dev/null @@ -1,302 +0,0 @@ -/** - * @fileoverview Toolbar for manipulating the display of the blob index page. - * - */ -goog.provide('camlistore.Toolbar'); -goog.provide('camlistore.Toolbar.EventType'); - -goog.require('goog.dom'); -goog.require('goog.dom.classes'); -goog.require('goog.events.EventHandler'); -goog.require('goog.events.EventType'); -goog.require('goog.ui.MenuItem'); -goog.require('goog.ui.PopupMenu'); -goog.require('goog.ui.Toolbar'); -goog.require('goog.ui.ToolbarButton'); -goog.require('goog.ui.ToolbarMenuButton'); - - -/** - * @param {goog.dom.DomHelper=} opt_domHelper DOM helper to use. - * - * @extends {goog.ui.Toolbar} - * @constructor - */ -camlistore.Toolbar = function(opt_domHelper) { - goog.base(this, opt_domHelper); - - /** - * @type {HTMLFormElement} - * @private - */ - this.searchform_ = this.dom_.createDom('form', 'cam-searchform'); - - /** - * @type {goog.ui.Button} - * @private - */ - this.biggerButton_ = new goog.ui.Button('+'); - this.biggerButton_.addClassName('cam-bigger'); - - /** - * @type {goog.ui.Button} - * @private - */ - this.smallerButton_ = new goog.ui.Button('\u2212'); - this.smallerButton_.addClassName('cam-smaller'); - - /** - * @type {goog.ui.Button} - * @private - */ - this.checkedItemsCreateSetButton_ = new goog.ui.Button(''); - this.checkedItemsCreateSetButton_.addClassName('cam-checked-items'); - this.checkedItemsCreateSetButton_.setVisible(false); - - /** - * @type {goog.ui.Button} - * @private - */ - this.clearSelectionButton_ = new goog.ui.Button('Clear Selection'); - this.clearSelectionButton_.setVisible(false); - - /** - * @type {goog.ui.Button} - * @private - */ - this.createPermanodeButton_ = new goog.ui.Button('New Permanode'); - this.createPermanodeButton_.addClassName('cam-toolbar-createpermanode'); - - /** - * @type {goog.ui.Button} - * @private - */ - this.checkedItemsAddToSetButton_ = new goog.ui.Button('Add to Set'); - this.checkedItemsAddToSetButton_.addClassName('cam-checked-items'); - this.checkedItemsAddToSetButton_.setEnabled(false); - - /** - * @type {goog.ui.Button} - * @private - */ - this.setAsCollecButton_ = new goog.ui.Button('Select as current Set'); - this.setAsCollecButton_.addClassName('cam-checked-items'); - this.setAsCollecButton_.setEnabled(false); - - - /** - * Used only on the search page - * @type {goog.ui.Button} - * @private - */ - this.rootsButton_ = new goog.ui.Button('Search Roots'); - this.rootsButton_.addClassName('cam-checked-items'); - - /** - * Used to display random statusy stuff. - */ - this.status_ = null; - - /** - * @type {goog.events.EventHandler} - * @private - */ - this.eh_ = new goog.events.EventHandler(this); -}; -goog.inherits(camlistore.Toolbar, goog.ui.Toolbar); - - -/** - * @enum {string} - */ -camlistore.Toolbar.EventType = { - SEARCH: 'Camlistore_Toolbar_Search', - BIGGER: 'Camlistore_Toolbar_Bigger', - SMALLER: 'Camlistore_Toolbar_Smaller', - ROOTS: 'Camlistore_Toolbar_SearchRoots', - CHECKED_ITEMS_ADDTO_SET: 'Camlistore_Toolbar_Checked_Items_Addto_set', - CLEAR_SELECTION: 'Clear_Selection', - SELECT_COLLEC: 'Camlistore_Toolbar_Select_collec', - CHECKED_ITEMS_CREATE_SET: 'Camlistore_Toolbar_Checked_Items_Create_set', - CREATE_PERMANODE: 'Camlistore_Toolbar_Create_Permanode', -}; - - -/** - * @return {goog.ui.Control} - */ -camlistore.Toolbar.prototype.setStatus = function(text) { - goog.dom.setTextContent(this.status_, text); -}; - - -camlistore.Toolbar.prototype.getSearchText = function() { - return this.searchbox_.value; -}; - - -/** - * Creates an initial DOM representation for the component. - */ -camlistore.Toolbar.prototype.createDom = function() { - this.decorateInternal(this.dom_.createElement('div')); -}; - - -/** - * Decorates an existing HTML DIV element. - * @param {Element} el The DIV element to decorate. - */ -camlistore.Toolbar.prototype.decorateInternal = function(el) { - camlistore.Toolbar.superClass_.decorateInternal.call(this, el); - this.getElement().className = 'cam-toolbar'; - - this.searchbox_ = this.dom_.createDom('input', 'cam-searchbox'); - this.searchbox_.setAttribute('placeholder', 'Search...'); - this.searchbox_.title = '"title:monkey", "tag:cheese", etc...'; - this.searchform_.appendChild(this.searchbox_); - this.getElement().appendChild(this.searchform_); - - this.addChild(this.smallerButton_, true); - this.addChild(this.biggerButton_, true); - this.addChild(this.checkedItemsCreateSetButton_, true); - this.addChild(this.clearSelectionButton_, true); - this.addChild(this.createPermanodeButton_, true); - this.addChild(this.setAsCollecButton_, true); - this.addChild(this.checkedItemsAddToSetButton_, true); - this.addChild(this.rootsButton_, true); - - this.status_ = this.dom_.createDom('div', 'cam-toolbar-status'); - this.getElement().appendChild(this.status_); -}; - - -/** @override */ -camlistore.Toolbar.prototype.disposeInternal = function() { - camlistore.Toolbar.superClass_.disposeInternal.call(this); - this.eh_.dispose(); -}; - - -/** - * Called when component's element is known to be in the document. - */ -camlistore.Toolbar.prototype.enterDocument = function() { - camlistore.Toolbar.superClass_.enterDocument.call(this); - goog.style.setUnselectable(this.searchbox_, false); - - this.eh_.listen( - this.searchform_, - goog.events.EventType.SUBMIT, - function(e) { - e.stopPropagation(); - e.preventDefault(); - this.dispatch_(camlistore.Toolbar.EventType.SEARCH); - }.bind(this)); - - this.eh_.listen( - this.biggerButton_.getElement(), - goog.events.EventType.CLICK, - goog.bind(this.dispatch_, this, camlistore.Toolbar.EventType.BIGGER)); - - this.eh_.listen( - this.smallerButton_.getElement(), - goog.events.EventType.CLICK, - goog.bind(this.dispatch_, this, camlistore.Toolbar.EventType.SMALLER)); - - this.eh_.listen( - this.rootsButton_.getElement(), - goog.events.EventType.CLICK, - goog.bind(this.dispatch_, this, camlistore.Toolbar.EventType.ROOTS)); - - this.eh_.listen( - this.checkedItemsCreateSetButton_.getElement(), - goog.events.EventType.CLICK, - goog.bind(this.dispatch_, this, - camlistore.Toolbar.EventType.CHECKED_ITEMS_CREATE_SET)); - - this.eh_.listen( - this.clearSelectionButton_.getElement(), - goog.events.EventType.CLICK, - goog.bind(this.dispatch_, this, - camlistore.Toolbar.EventType.CLEAR_SELECTION)); - - this.eh_.listen( - this.createPermanodeButton_.getElement(), - goog.events.EventType.CLICK, - goog.bind(this.dispatch_, this, - camlistore.Toolbar.EventType.CREATE_PERMANODE)); - - this.eh_.listen( - this.setAsCollecButton_.getElement(), - goog.events.EventType.CLICK, - goog.bind(this.dispatch_, this, - camlistore.Toolbar.EventType.SELECT_COLLEC)); - - this.eh_.listen( - this.checkedItemsAddToSetButton_.getElement(), - goog.events.EventType.CLICK, - goog.bind(this.dispatch_, this, - camlistore.Toolbar.EventType.CHECKED_ITEMS_ADDTO_SET)); - -}; - - -/** - * @param {camlistore.Toolbar.EventType} eventType Type of event to dispatch. - */ -camlistore.Toolbar.prototype.dispatch_ = function(eventType) { - this.dispatchEvent(eventType); -}; - - -/** - * Called when component's element is known to have been removed from the - * document. - */ -camlistore.Toolbar.prototype.exitDocument = function() { - camlistore.Toolbar.superClass_.exitDocument.call(this); - // Clear event handlers here -}; - - -/** - * TODO: i18n. - * @param {number} count Number of items. - */ -camlistore.Toolbar.prototype.setCheckedBlobItemCount = function(count) { - if (count) { - var txt = 'Create set w/ ' + count + ' item' + (count > 1 ? 's' : ''); - this.checkedItemsCreateSetButton_.setContent(txt); - this.checkedItemsCreateSetButton_.setVisible(true); - this.clearSelectionButton_.setVisible(true); - } else { - this.checkedItemsCreateSetButton_.setContent(''); - this.checkedItemsCreateSetButton_.setVisible(false); - this.clearSelectionButton_.setVisible(false); - } -}; - -/** - * TODO: i18n. - * @param {boolean} enable - */ -camlistore.Toolbar.prototype.toggleCollecButton = function(enable) { - if (enable) { - this.setAsCollecButton_.setEnabled(true); - } else { - this.setAsCollecButton_.setEnabled(false); - } -}; - -/** - * TODO: i18n. - * @param {boolean} enable - */ -camlistore.Toolbar.prototype.toggleAddToSetButton = function(enable) { - if (enable) { - this.checkedItemsAddToSetButton_.setEnabled(true); - } else { - this.checkedItemsAddToSetButton_.setEnabled(false); - } -}; diff --git a/server/camlistored/ui/toolbar_test.html b/server/camlistored/ui/toolbar_test.html deleted file mode 100644 index a01459ddf..000000000 --- a/server/camlistored/ui/toolbar_test.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - - - - -