From 84d46cc7630ba656615ce0f8866f9b8a439f1b32 Mon Sep 17 00:00:00 2001 From: Sean McIntyre Date: Tue, 30 Jan 2018 13:56:22 -0500 Subject: [PATCH 1/4] Missing style variables --- src/docs/style-customization.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/docs/style-customization.md b/src/docs/style-customization.md index 858cffd..4424066 100644 --- a/src/docs/style-customization.md +++ b/src/docs/style-customization.md @@ -10,6 +10,8 @@ $lex-token-background: #ededed; // background color for tokens $lex-token-color: #555; // text color for tokens (inherit from Bootstrap) $lex-token-hover-color: lighten($lex-token-color, 15%); // hover color for close button $lex-token-border-color: darken($lex-token-background, 15%); // border color for a token +$lex-token-remove-button-color: lighten($lex-token-color, 45%) !default; // hover color for remove button in multi-entry +$lex-token-remove-button-hover-color: darken($lex-token-remove-button-color, 15%) !default; // text color for remove button in multi-entry $lex-token-active-background: darken($lex-token-background, 15%); // background color for active region of a token. should lighten for dark theme $lex-token-invalid-background: #e2a4e2; // background color for invalid region of token. should lighten for dark theme $lex-assistant-background: #fff; // background color for assistant drop-down From b17335ad2a0f126b475fd02d6937388b01e93ef9 Mon Sep 17 00:00:00 2001 From: Sean McIntyre Date: Tue, 30 Jan 2018 14:33:03 -0500 Subject: [PATCH 2/4] Adding token editing support --- src/components/search-bar.jsx | 26 ++++++++++++++++++++++---- src/components/token.jsx | 18 +++++++++++++++++- src/style/lex.scss | 11 ++++++++++- 3 files changed, 49 insertions(+), 6 deletions(-) diff --git a/src/components/search-bar.jsx b/src/components/search-bar.jsx index c1d98d4..065eb04 100644 --- a/src/components/search-bar.jsx +++ b/src/components/search-bar.jsx @@ -18,6 +18,7 @@ export class SearchBar extends Component { machineTemplate: undefined, machines: undefined, active: false, + editing: false, focused: false, tokenXIcon: '×', onQueryChanged: () => {}, @@ -312,7 +313,10 @@ export class SearchBar extends Component { const oldState = this.state.activeMachine.state; const newState = this.state.activeMachine.rewind(); if (oldState === newState) { - this.setState({active: false}); + if (this.state.editing) { + this.queryChanged(this.state.editing); + } + this.setState({active: false, editing: false}); } } @@ -328,6 +332,7 @@ export class SearchBar extends Component { onEndToken (v) { const oldQueryValues = this.state.tokenValues; this.setState({ + editing: false, tokenValues: [...this.state.tokenValues, v], activeMachine: new TokenStateMachine(this.state.machineTemplate) }); @@ -341,6 +346,7 @@ export class SearchBar extends Component { if (idx === undefined) { this.setState({ active: false, + editing: false, activeMachine: new TokenStateMachine(this.state.machineTemplate) }); } else { @@ -352,6 +358,18 @@ export class SearchBar extends Component { } } + @bind + editToken (idx) { + if (idx >= 0) { + this.setState({ + active: true, + editing: this.state.tokenValues, + activeMachine: new TokenStateMachine(this.state.machineTemplate, this.state.tokenValues[idx]), + tokenValues: [...this.state.tokenValues.slice(0, idx), ...this.state.tokenValues.slice(idx + 1)] + }); + } + } + @bind removeSuggestion (idx) { const oldSuggestions = this.state.suggestions; @@ -384,12 +402,12 @@ export class SearchBar extends Component { this.state.onSuggestionsChanged(this.state.suggestions, oldSuggestionValues, newUnboxedValues, oldUnboxedValues); } - render (props, {focused, tokenValues, suggestions, builders, machineTemplate, activeMachine, tokenXIcon}) { + render (props, {active, focused, tokenValues, suggestions, builders, machineTemplate, activeMachine, tokenXIcon}) { return ( -
{ this.searchBox = a; }}> +
{ this.searchBox = a; }}> { tokenValues.map((v, i) => { - return ; + return ; }) } { diff --git a/src/components/token.jsx b/src/components/token.jsx index 6bf03e2..4696ee3 100644 --- a/src/components/token.jsx +++ b/src/components/token.jsx @@ -18,6 +18,7 @@ export class Token extends Component { tokenXIcon: '×', requestFocus: () => {}, requestBlur: () => {}, + requestEdit: () => {}, requestTransition: () => {}, requestArchive: () => {}, requestUnarchive: () => {}, @@ -41,6 +42,7 @@ export class Token extends Component { requestRemoval = () => {}, requestFocus = () => {}, requestBlur = () => {}, + requestEdit = () => {}, requestCancel = () => {}, requestTransition = () => {}, requestArchive = () => {}, @@ -118,6 +120,11 @@ export class Token extends Component { requestBlur: requestBlur }); } + if (requestEdit !== this.state.requestEdit) { + this.setState({ + requestEdit: requestEdit + }); + } if (requestCancel !== this.state.requestCancel) { this.setState({ requestCancel: requestCancel @@ -288,6 +295,15 @@ export class Token extends Component { this.state.requestAddSuggestion(this.state.idx); } + @bind + requestEdit (e) { + e.preventDefault(); + e.stopPropagation(); + if (!this.state.active && this.state.requestEdit) { + this.state.requestEdit(this.state.idx); + } + } + @bind requestCancel () { this.state.machine.reset(); @@ -302,7 +318,7 @@ export class Token extends Component { render (props, {active, suggestion, machine, focused}) { return ( -
+
{this.icon} {this.state.stateArray.map(s => { const Builder = this.state.builders.getBuilder(s.template.constructor); diff --git a/src/style/lex.scss b/src/style/lex.scss index 075228d..f73024f 100644 --- a/src/style/lex.scss +++ b/src/style/lex.scss @@ -25,9 +25,18 @@ div.lex-box { background: $lex-background; border-color: $lex-border-color; + &.active, &.focused { + outline: 0; + } + + &.active { + border-color: lighten(desaturate($lex-highlight-color, 50%), 20%); + -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px darken($lex-highlight-color, 10%); + box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px darken($lex-highlight-color, 10%); + } + &.focused { border-color: $lex-highlight-color; - outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px darken($lex-highlight-color, 10%); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px darken($lex-highlight-color, 10%); } From d69ed89fa219ff0bfb4762b6d0776ea0e22cfdcd Mon Sep 17 00:00:00 2001 From: Sean McIntyre Date: Tue, 30 Jan 2018 14:43:02 -0500 Subject: [PATCH 3/4] Disallowing editing of token while user is already editing/creating one. Added visual hint for this. --- src/components/search-bar.jsx | 15 ++++++++++++++- src/components/token.jsx | 11 +++++++++-- src/style/lex.scss | 15 +++++++++++++++ 3 files changed, 38 insertions(+), 3 deletions(-) diff --git a/src/components/search-bar.jsx b/src/components/search-bar.jsx index 065eb04..d501973 100644 --- a/src/components/search-bar.jsx +++ b/src/components/search-bar.jsx @@ -20,6 +20,7 @@ export class SearchBar extends Component { active: false, editing: false, focused: false, + flashActive: false, tokenXIcon: '×', onQueryChanged: () => {}, onSuggestionsChanged: () => {}, @@ -171,6 +172,7 @@ export class SearchBar extends Component { if (this.state.active) { return (= 0) { + if (!this.state.active && idx >= 0) { this.setState({ active: true, editing: this.state.tokenValues, activeMachine: new TokenStateMachine(this.state.machineTemplate, this.state.tokenValues[idx]), tokenValues: [...this.state.tokenValues.slice(0, idx), ...this.state.tokenValues.slice(idx + 1)] }); + } else if (this.state.active) { + this.setState({ + flashActive: false + }); + setTimeout(() => { + this.setState({ + flashActive: true + }); + }); } } diff --git a/src/components/token.jsx b/src/components/token.jsx index 4696ee3..97b7dda 100644 --- a/src/components/token.jsx +++ b/src/components/token.jsx @@ -11,6 +11,7 @@ export class Token extends Component { idx: undefined, active: false, focused: false, + flash: false, suggestion: false, machine: undefined, builders: undefined, @@ -35,6 +36,7 @@ export class Token extends Component { const { idx, active, + flash, suggestion, machine, builders, @@ -63,6 +65,11 @@ export class Token extends Component { active: active }); } + if (flash !== this.state.flash) { + this.setState({ + flash: flash + }); + } if (suggestion !== this.state.suggestion) { this.setState({ suggestion: suggestion @@ -316,9 +323,9 @@ export class Token extends Component { } } - render (props, {active, suggestion, machine, focused}) { + render (props, {active, flash, suggestion, machine, focused}) { return ( -
+
{this.icon} {this.state.stateArray.map(s => { const Builder = this.state.builders.getBuilder(s.template.constructor); diff --git a/src/style/lex.scss b/src/style/lex.scss index f73024f..8d38715 100644 --- a/src/style/lex.scss +++ b/src/style/lex.scss @@ -228,3 +228,18 @@ div.assistant-box { } } } + +.anim-flash { + -webkit-animation: flash linear 0.25s 3; + animation: flash linear 0.25s 3; +} +@-webkit-keyframes flash { + 0% { opacity: 1; } + 50% { opacity: .1; } + 100% { opacity: 1; } +} +@keyframes flash { + 0% { opacity: 1; } + 50% { opacity: .1; } + 100% { opacity: 1; } +} From 3aa992e03c70ef7fe79b612cccd27d1233df19a9 Mon Sep 17 00:00:00 2001 From: Sean McIntyre Date: Tue, 30 Jan 2018 14:44:31 -0500 Subject: [PATCH 4/4] Minor state issue --- src/components/search-bar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/search-bar.jsx b/src/components/search-bar.jsx index d501973..a7f0e90 100644 --- a/src/components/search-bar.jsx +++ b/src/components/search-bar.jsx @@ -318,7 +318,7 @@ export class SearchBar extends Component { if (this.state.editing) { this.queryChanged(this.state.editing); } - this.setState({active: false, editing: false}); + this.setState({active: false, editing: false, flashActive: false}); } }