From 973619d1785fb0944ae35ac880d6850ef444aab7 Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Fri, 19 Jun 2020 14:49:22 +0200 Subject: [PATCH] WIP: filters as narratives always --- src/components/CardStack.jsx | 5 ++- src/components/Layout.js | 41 ++++++++++++++++++- src/components/Map.jsx | 3 +- src/components/StateOptions.jsx | 19 +++++++++ .../presentational/Map/Narratives.js | 37 +++++++++++------ src/scss/main.scss | 1 + src/scss/stateoptions.scss | 28 +++++++++++++ 7 files changed, 118 insertions(+), 16 deletions(-) create mode 100644 src/components/StateOptions.jsx create mode 100644 src/scss/stateoptions.scss diff --git a/src/components/CardStack.jsx b/src/components/CardStack.jsx index 634648a..b99d02f 100644 --- a/src/components/CardStack.jsx +++ b/src/components/CardStack.jsx @@ -136,8 +136,10 @@ class CardStack extends React.Component { } render () { - const { isCardstack, selected, narrative } = this.props + const { isCardstack, selected, narrative, timelineDims } = this.props + // TODO: make '237px', which is the narrative header, less hard-coded + const height = `calc(100% - 237px - ${timelineDims.height}px)` if (selected.length > 0) { if (!narrative) { return ( @@ -159,6 +161,7 @@ class CardStack extends React.Component { className={`card-stack narrative-mode ${isCardstack ? '' : ' folded'}` } + style={{height}} > {this.renderNarrativeContent()} diff --git a/src/components/Layout.js b/src/components/Layout.js index 0509a95..fe60db6 100644 --- a/src/components/Layout.js +++ b/src/components/Layout.js @@ -13,6 +13,7 @@ import NarrativeControls from './presentational/Narrative/Controls.js' import InfoPopUp from './InfoPopup.jsx' import Timeline from './Timeline.jsx' import Notification from './Notification.jsx' +import StateOptions from './StateOptions.jsx' import StaticPage from './StaticPage' import TemplateCover from './TemplateCover' @@ -27,6 +28,7 @@ class Dashboard extends React.Component { this.handleViewSource = this.handleViewSource.bind(this) this.handleHighlight = this.handleHighlight.bind(this) this.setNarrative = this.setNarrative.bind(this) + this.setNarrativeFromFilters = this.setNarrativeFromFilters.bind(this) this.moveInNarrative = this.moveInNarrative.bind(this) this.handleSelect = this.handleSelect.bind(this) this.getCategoryColor = this.getCategoryColor.bind(this) @@ -115,13 +117,42 @@ class Dashboard extends React.Component { setNarrative (narrative) { // only handleSelect if narrative is not null if (narrative) { - this.props.actions.clearFilter('filters') - this.props.actions.clearFilter('categories') this.handleSelect([ narrative.steps[0] ]) } this.props.actions.updateNarrative(narrative) } + setNarrativeFromFilters (withSteps) { + const { app, domain } = this.props + const activeFilters = app.filters.filters + + if (activeFilters.length === 0) { + alert('No filters selected, cant narrativise') + return + } + + const evs = domain.events.filter(ev => { + let hasOne = false + // add event if it has at least one matching filter + for (let i = 0; i < activeFilters.length; i++) { + if (ev.filters.includes(activeFilters[i])) { + hasOne = true + break + } + } + if (hasOne) return true + return false + }) + + const name = activeFilters.join('-') + this.setNarrative({ + id: name, + label: name, + description: '', + steps: evs + }) + } + moveInNarrative (amt) { const { current } = this.props.app.narrativeState const { narrative } = this.props.app @@ -183,6 +214,7 @@ class Dashboard extends React.Component { }} /> this.getNarrativeLinks(event)} getCategoryColor={this.getCategoryColor} /> + 0} + timelineDims={app.timeline.dimensions} + onClickHandler={this.setNarrativeFromFilters} + /> 0 return ( { + const [checked, setChecked] = useState(true) + const handleCheck = () => setChecked(!checked) + const onNarrativise = () => onClickHandler(checked) + + if (!showing) { + return null + } + + return
+
+
Narrativise
+ + +
+
+} diff --git a/src/components/presentational/Map/Narratives.js b/src/components/presentational/Map/Narratives.js index 7cf73fe..a3fbd7e 100644 --- a/src/components/presentational/Map/Narratives.js +++ b/src/components/presentational/Map/Narratives.js @@ -132,19 +132,31 @@ function MapNarratives ({ styles, onSelectNarrative, svg, narrative, narratives, const arrows = [] let lastMarked = null + for (let idx = 0; idx < n.steps.length; idx += 1) { const step = n.steps[idx] - const _idx = step.narratives.indexOf(n.id) - const stepStyle = step.narrative___stepStyles[_idx] - - if (stepStyle !== 'None') { - if (lastMarked) { - arrows.push(renderBetweenSteps(lastMarked, step, styles.stepStyles[stepStyle])) - } - lastMarked = step + if (lastMarked) { + arrows.push(renderBetweenSteps(lastMarked, step, { + strokeWidth: '1px', + stroke: step.colour + })) } + lastMarked = step } + // for (let idx = 0; idx < n.steps.length; idx += 1) { + // const step = n.steps[idx] + // const _idx = step.narratives.indexOf(n.id) + // const stepStyle = step.narrative___stepStyles[_idx] + // + // if (stepStyle !== 'None') { + // if (lastMarked) { + // arrows.push(renderBetweenSteps(lastMarked, step, styles.stepStyles[stepStyle])) + // } + // lastMarked = step + // } + // } + return arrows } @@ -153,10 +165,11 @@ function MapNarratives ({ styles, onSelectNarrative, svg, narrative, narratives, return ( - {(features.NARRATIVE_STEP_STYLES - ? renderBetweenMarked(n) - : renderFullNarrative(n) - )} + {renderBetweenMarked(n)} + {/* {(features.NARRATIVE_STEP_STYLES */} + {/* ? renderBetweenMarked(n) */} + {/* : renderFullNarrative(n) */} + {/* )} */} ) } diff --git a/src/scss/main.scss b/src/scss/main.scss index df92eed..aba2c0c 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -12,3 +12,4 @@ @import 'notification'; @import 'mediaplayer'; @import 'cover'; +@import 'stateoptions'; diff --git a/src/scss/stateoptions.scss b/src/scss/stateoptions.scss new file mode 100644 index 0000000..7be70d4 --- /dev/null +++ b/src/scss/stateoptions.scss @@ -0,0 +1,28 @@ +.stateoptions-panel { + position: absolute; + right: 0; + box-sizing: border-box; + margin: 1px 0 0 0; + padding: 15px; + border: 1px solid $black; + transition: 0.2 ease; + background: $midwhite; + color: $darkgrey; + box-shadow: 0 19px 19px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); + font-size: $large; + line-height: $xxlarge; + height: auto; + opacity: 0.9; + transition: background-color 0.4s; + + .button { + border: 1px solid black; + padding: 0.3em; + transition: all 0.3s ease; + &:hover { + background-color: black; + color: white; + cursor: pointer; + } + } +}