From 3910a2dd8f865e496506ac6a9931e5ee8f934e79 Mon Sep 17 00:00:00 2001 From: Giulio Cesare Solaroli Date: Sun, 12 Oct 2014 14:48:34 +0200 Subject: [PATCH] Highlighted selected items in the selection panel. Also added some improvements suggested here: http://www.luster.io/blog/9-29-14-mobile-web-checklist.html --- .../Clipperz/PM/UI/Components/Selections.js | 6 ++- .../Clipperz/PM/UI/Components/TagIndexItem.js | 6 ++- frontend/delta/scss/core/behavior.scss | 2 +- frontend/delta/scss/core/layout.scss | 1 + frontend/delta/scss/core/mixin.scss | 17 ++++++++ frontend/delta/scss/style/card.scss | 3 ++ frontend/delta/scss/style/loginPage.scss | 4 +- frontend/delta/scss/style/selectionPanel.scss | 40 ++++++++++++++++++- 8 files changed, 72 insertions(+), 7 deletions(-) diff --git a/frontend/delta/js/Clipperz/PM/UI/Components/Selections.js b/frontend/delta/js/Clipperz/PM/UI/Components/Selections.js index af56cf2..21c5511 100644 --- a/frontend/delta/js/Clipperz/PM/UI/Components/Selections.js +++ b/frontend/delta/js/Clipperz/PM/UI/Components/Selections.js @@ -58,12 +58,16 @@ Clipperz.PM.UI.Components.Selections = React.createClass({ var archivedCardsCount; var selectedCardCount; var filterType; + var filterValue; +console.log("SELECTIONS PROPS", this.props); tagInfo = this.props['tags'] ? this.props['tags'] : {}; tags = MochiKit.Base.filter(Clipperz.PM.DataModel.Record.isRegularTag, MochiKit.Base.keys(tagInfo)).sort(Clipperz.Base.caseInsensitiveCompare); archivedCardsCount = this.props['archivedCardsCount']; selectedCardCount = this.props['cards'] ? this.props['cards'].length : 0; + filterType = (this.props['filter'] && this.props['filter']['type']) ? this.props['filter']['type'] : 'ALL'; + filterValue = (this.props['filter'] && this.props['filter']['value']) ? this.props['filter']['value'] : null; return React.DOM.div({'key':'selections', 'id':'selections', 'className':filterType}, [ React.DOM.ul({'className':'defaultSet'}, [ @@ -80,7 +84,7 @@ Clipperz.PM.UI.Components.Selections = React.createClass({ React.DOM.div({}, [ React.DOM.span({'className':'count'}, selectedCardCount) ]) ]) ]), - React.DOM.ul({'className':'tagList'}, MochiKit.Base.map(function (aTag) {return Clipperz.PM.UI.Components.TagIndexItem({'label':aTag, 'count':tagInfo[aTag]}); }, tags)), + React.DOM.ul({'className':'tagList'}, MochiKit.Base.map(function (aTag) {return Clipperz.PM.UI.Components.TagIndexItem({'label':aTag, 'count':tagInfo[aTag], 'selected':aTag == filterValue}); }, tags)), React.DOM.div({'className':'showArchivedCards', 'onClick':this.handleCheckboxChanges}, [ React.DOM.input({'type':'checkbox', 'checked':this.props['shouldIncludeArchivedCards'] ? 'checked' : null}), React.DOM.span({'className':'label'}, "Show archived cards"), diff --git a/frontend/delta/js/Clipperz/PM/UI/Components/TagIndexItem.js b/frontend/delta/js/Clipperz/PM/UI/Components/TagIndexItem.js index 61256fd..ab47fab 100644 --- a/frontend/delta/js/Clipperz/PM/UI/Components/TagIndexItem.js +++ b/frontend/delta/js/Clipperz/PM/UI/Components/TagIndexItem.js @@ -39,7 +39,11 @@ Clipperz.PM.UI.Components.TagIndexItem = React.createClass({ }, render: function () { - return React.DOM.li({'onClick': this.handleClick, 'data-tag':this.props['label']}, [ + var classes = { + 'selected': this.props['selected'] + } + + return React.DOM.li({'onClick': this.handleClick, 'className':React.addons.classSet(classes), 'data-tag':this.props['label']}, [ React.DOM.span({'className':'tagLabel'}, this.props['label']), React.DOM.span({'className':'tagCount'}, this.props['count']) ]); diff --git a/frontend/delta/scss/core/behavior.scss b/frontend/delta/scss/core/behavior.scss index d16941e..95cd4e7 100644 --- a/frontend/delta/scss/core/behavior.scss +++ b/frontend/delta/scss/core/behavior.scss @@ -56,7 +56,7 @@ $transition-duration: 0.5s; @mixin sliding-panel ($side, $size) { position: fixed; z-index: 20; - overflow: scroll; + @include overflow-scroll; @if $side == left { @include sliding-panel-left($size); diff --git a/frontend/delta/scss/core/layout.scss b/frontend/delta/scss/core/layout.scss index fad71ad..753c41a 100644 --- a/frontend/delta/scss/core/layout.scss +++ b/frontend/delta/scss/core/layout.scss @@ -2,6 +2,7 @@ .page { @include pageElement(); + @include user-select(none); } .mainPage { diff --git a/frontend/delta/scss/core/mixin.scss b/frontend/delta/scss/core/mixin.scss index e780776..6c69735 100644 --- a/frontend/delta/scss/core/mixin.scss +++ b/frontend/delta/scss/core/mixin.scss @@ -141,3 +141,20 @@ 0% { @include transform(0deg, 0, 0); } 100% { @include transform(359deg, 0, 0); } } + +@mixin user-select($value) { + // http://css-tricks.com/almanac/properties/u/user-select/ + // none | text | all | element + -webkit-user-select: $value; /* Chrome all / Safari all */ + -moz-user-select: $value; /* Firefox all */ + -ms-user-select: $value; /* IE 10+ */ + + /* No support for these yet, use at own risk */ + -o-user-select: $value; + user-select: $value; +} + +@mixin overflow-scroll () { + overflow: scroll; + -webkit-overflow-scrolling: touch; +} diff --git a/frontend/delta/scss/style/card.scss b/frontend/delta/scss/style/card.scss index b1d2aad..4c8af91 100644 --- a/frontend/delta/scss/style/card.scss +++ b/frontend/delta/scss/style/card.scss @@ -220,6 +220,8 @@ $cardViewBasePadding: 10px; .content { .cardLabel { + @include user-select(text); + font-size: 24pt; padding: $cardViewBasePadding; } @@ -258,6 +260,7 @@ $cardViewBasePadding: 10px; .fieldValue { font-size: 18pt; + @include user-select(text); &.hidden { font-family: clipperz-password; diff --git a/frontend/delta/scss/style/loginPage.scss b/frontend/delta/scss/style/loginPage.scss index 55edc58..52a3ad4 100644 --- a/frontend/delta/scss/style/loginPage.scss +++ b/frontend/delta/scss/style/loginPage.scss @@ -1,6 +1,6 @@ #loginPage { - overflow: scroll; - + @include overflow-scroll; + div.loginForm { @include flexbox; @include flex-direction(column); diff --git a/frontend/delta/scss/style/selectionPanel.scss b/frontend/delta/scss/style/selectionPanel.scss index 168d034..d7df621 100644 --- a/frontend/delta/scss/style/selectionPanel.scss +++ b/frontend/delta/scss/style/selectionPanel.scss @@ -2,7 +2,7 @@ background-color: $main-alternate-color; color: $main-alternate-text-color; font-size: 18pt; - overflow: scroll; + @include overflow-scroll; // height: 100%; $iconColumnWidth: 40px; @@ -89,4 +89,40 @@ @include border-radius(4px); } } -} \ No newline at end of file +} + +$selectionColor: yellow; + +#selections.ALL { + li.allCards { + color: $selectionColor; + } +} + +#selections.RECENT { + li.recentCards { + color: $selectionColor; + } +} + +#selections.UNTAGGED { + li.untaggedCards { + color: $selectionColor; + } +} + +#selections.SEARCH { + div.search { + color: $selectionColor; + } +} + +#selections.TAG { + ul.tagList { + li.selected { + color: $selectionColor; + } + } +} + +