From 093d5e7965666c9545a4547d1e952d13e134fc87 Mon Sep 17 00:00:00 2001 From: Giulio Cesare Solaroli Date: Mon, 22 Sep 2014 16:53:44 +0200 Subject: [PATCH] Basic implementation of search feature --- .../PM/UI/Components/Panels/MainPanel.js | 4 +-- .../Clipperz/PM/UI/Components/Selections.js | 25 +++++++++++++------ .../delta/js/Clipperz/PM/UI/MainController.js | 13 +++++++++- frontend/delta/scss/core/sizes.scss | 3 ++- 4 files changed, 33 insertions(+), 12 deletions(-) diff --git a/frontend/delta/js/Clipperz/PM/UI/Components/Panels/MainPanel.js b/frontend/delta/js/Clipperz/PM/UI/Components/Panels/MainPanel.js index 80e880a..868b4fc 100644 --- a/frontend/delta/js/Clipperz/PM/UI/Components/Panels/MainPanel.js +++ b/frontend/delta/js/Clipperz/PM/UI/Components/Panels/MainPanel.js @@ -156,8 +156,8 @@ Clipperz.PM.UI.Components.Panels.MainPanel = React.createClass({ result = this.renderWide(); } else if (aLayout == 'narrow') { result = this.renderNarrow(); - } else if (aLayout == 'extra-short') { - result = this.renderNarrow(); +// } else if (aLayout == 'extra-short') { +// result = this.renderNarrow(); } else { Clipperz.Base.exception.raise('UnknownType'); } diff --git a/frontend/delta/js/Clipperz/PM/UI/Components/Selections.js b/frontend/delta/js/Clipperz/PM/UI/Components/Selections.js index 4f365ca..af56cf2 100644 --- a/frontend/delta/js/Clipperz/PM/UI/Components/Selections.js +++ b/frontend/delta/js/Clipperz/PM/UI/Components/Selections.js @@ -48,27 +48,36 @@ Clipperz.PM.UI.Components.Selections = React.createClass({ } }, + handleSearchChange: function (anEvent) { + MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'search', anEvent.currentTarget.value); + }, + render: function () { var tagInfo; var tags; var archivedCardsCount; + var selectedCardCount; + var filterType; 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 = tagInfo[Clipperz.PM.DataModel.Record.archivedTag] ? tagInfo[Clipperz.PM.DataModel.Record.archivedTag] : 0; 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'; - return React.DOM.div({'key':'selections', 'id':'selections'}, [ + return React.DOM.div({'key':'selections', 'id':'selections', 'className':filterType}, [ React.DOM.ul({'className':'defaultSet'}, [ - React.DOM.li({'className':'allCards', onClick: this.selectAll}, "All"), - React.DOM.li({'className':'recentCards', onClick: this.selectRecent}, "Recent"), - React.DOM.li({'className':'untaggedCards', onClick: this.selectUntaggedCards}, "Untagged - " + this.props['untaggedCardsCount']) + React.DOM.li({'className':'allCards', 'onClick': this.selectAll}, "All"), + React.DOM.li({'className':'recentCards', 'onClick': this.selectRecent}, "Recent"), + React.DOM.li({'className':'untaggedCards', 'onClick': this.selectUntaggedCards}, "Untagged - " + this.props['untaggedCardsCount']) ]), React.DOM.div({'className':'search'}, [ React.DOM.form({'className':'searchForm'}, [ - React.DOM.label({'htmlFor':'searchValue'}, 'search'), - React.DOM.input({'type':'text', 'id':'searchValue', 'name':'search'}) + React.DOM.div({}, [ + React.DOM.label({'htmlFor':'searchValue'}, 'search'), + React.DOM.input({'type':'text', 'id':'searchValue', 'onFocus':this.handleSearchChange, 'onChange':this.handleSearchChange, 'name':'search'}) + ]), + 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)), diff --git a/frontend/delta/js/Clipperz/PM/UI/MainController.js b/frontend/delta/js/Clipperz/PM/UI/MainController.js index 92f3384..feafb50 100644 --- a/frontend/delta/js/Clipperz/PM/UI/MainController.js +++ b/frontend/delta/js/Clipperz/PM/UI/MainController.js @@ -59,7 +59,7 @@ Clipperz.PM.UI.MainController = function() { 'doLogin', 'registerNewUser', 'showRegistrationForm', 'goBack', 'toggleSelectionPanel', 'toggleSettingsPanel', 'matchMediaQuery', 'unmatchMediaQuery', - 'selectAllCards', 'selectRecentCards', 'tagSelected', 'selectUntaggedCards', + 'selectAllCards', 'selectRecentCards', 'search', 'tagSelected', 'selectUntaggedCards', 'refreshCardEditDetail', // 'refreshCardEditToolbar', 'saveCardEdits', 'cancelCardEdits', @@ -1146,6 +1146,17 @@ console.log("SET USER", aUser); return this.refreshSelectedCards(); }, + search_handler: function (aValue) { +//console.log("SEARCH", aValue); + if (aValue == "") { + this.setFilter('ALL'); + } else { + this.setFilter('SEARCH', aValue); + } + + return this.refreshSelectedCards(); + }, + tagSelected_handler: function (aTag) { this.setFilter('TAG', aTag); return this.refreshSelectedCards(); diff --git a/frontend/delta/scss/core/sizes.scss b/frontend/delta/scss/core/sizes.scss index 7ea7ebe..2ee8973 100644 --- a/frontend/delta/scss/core/sizes.scss +++ b/frontend/delta/scss/core/sizes.scss @@ -41,7 +41,7 @@ This configuration is now located in the first script included in the index_temp content: "extra-wide"; } } - +/* @media only screen and (min-width: 100px) and (max-height: 450px) { html { font-family: "extra-short"; @@ -50,3 +50,4 @@ This configuration is now located in the first script included in the index_temp content: "extra-short"; } } +*/ \ No newline at end of file