From 470daf27e7f68e06f83508cd06501854109b3cbc Mon Sep 17 00:00:00 2001
From: Franc Camps-Febrer <francamps@gmail.com>
Date: Wed, 16 Jan 2019 09:57:51 -0500
Subject: [PATCH] Use tag arrays in events, no longer strings

---
 src/components/SourceOverlay.jsx   |  7 +++--
 src/components/TagListPanel.jsx    |  2 +-
 src/components/Toolbar.jsx         | 16 +++++------
 src/reducers/schema/eventSchema.js |  2 +-
 src/scss/mediaoverlay.scss         | 44 ++++++++++++++++++++++++++----
 src/scss/timeline.scss             |  5 ++++
 src/selectors/index.js             |  3 +-
 7 files changed, 58 insertions(+), 21 deletions(-)

diff --git a/src/components/SourceOverlay.jsx b/src/components/SourceOverlay.jsx
index d18a865..ea94e2d 100644
--- a/src/components/SourceOverlay.jsx
+++ b/src/components/SourceOverlay.jsx
@@ -19,7 +19,7 @@ function SourceOverlay ({ source, onCancel }) {
       <Img
       className='source-image'
       src={path}
-      loader={<Spinner />}
+      loader={<div style={{ width: '400px', height: '400px' }}><Spinner /></div>}
       unloader={<NoSource failedUrls={source.paths} />}
       />
       </div>
@@ -107,8 +107,8 @@ function SourceOverlay ({ source, onCancel }) {
     return (
       <div>
         {img ? img : ''}
-        {vid ? `, ${vid}`: ''}
-        {txt ? `, ${txt}`: ''}
+        {(img && vid) ? `, ${vid}`: (vid || '')}
+        {((img || vid) && txt) ? `, ${txt}`: (txt || '')}
       </div>
     )
   }
@@ -145,6 +145,7 @@ function SourceOverlay ({ source, onCancel }) {
           <div className="mo-box">
             {title? <p><b>{title}</b></p> : null}
             <div>{_renderCounts(counts)}</div>
+            <hr />
             {type ? <h4>Media type</h4> : null}
             {type ? <p><i className="material-icons left">perm_media</i>{type}</p> : null}
             {date ? <h4>Date</h4> : null}
diff --git a/src/components/TagListPanel.jsx b/src/components/TagListPanel.jsx
index fa6667b..1ca46e7 100644
--- a/src/components/TagListPanel.jsx
+++ b/src/components/TagListPanel.jsx
@@ -22,7 +22,7 @@ class TagListPanel extends React.Component {
 
   onClickCheckbox(tag) {
     tag.active = !tag.active
-    this.props.filter(tag);
+    this.props.onFilter(tag);
   }
 
   createNodeComponent (node, depth) {
diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx
index ea526f9..53b0808 100644
--- a/src/components/Toolbar.jsx
+++ b/src/components/Toolbar.jsx
@@ -81,7 +81,7 @@ class Toolbar extends React.Component {
             categories={this.props.categories}
             tagFilters={this.props.tagFilters}
             categoryFilters={this.props.categoryFilters}
-            filter={this.props.filter}
+            onFilter={this.props.methods.onFilter}
             language={this.props.language}
           />
         </TabPanel>
@@ -90,13 +90,13 @@ class Toolbar extends React.Component {
     return '';
   }
 
-  renderToolbarTab(_selected, label) {
+  renderToolbarTab(_selected, label, icon_key) {
     const isActive = (this.state._selected === _selected);
     let classes = (isActive) ? 'toolbar-tab active' : 'toolbar-tab';
 
     return (
       <div className={classes} onClick={() => { this.selectTab(_selected); }}>
-        <i className="material-icons">timeline</i>
+        <i className="material-icons">{icon_key}</i>
         <div className="tab-caption">{label}</div>
       </div>
     );
@@ -104,7 +104,7 @@ class Toolbar extends React.Component {
 
   renderToolbarTabs() {
     const title = copy[this.props.language].toolbar.title;
-    const isTags = this.props.tags && (this.props.tags.children > 0);
+    const isTags = this.props.tags && (Object.keys(this.props.tags.children) > 0);
 
     return (
       <div className="toolbar">
@@ -125,7 +125,7 @@ class Toolbar extends React.Component {
         {this.renderClosePanel()}
         <Tabs selectedIndex={this.state._selected}>
           {this.renderToolbarNarrativePanel()}
-          {/* {this.renderToolbarTagPanel()} */}
+          {this.renderToolbarTagPanel()}}
         </Tabs>
       </div>
     )
@@ -150,15 +150,15 @@ class Toolbar extends React.Component {
 
   renderToolbarTabs() {
     const title = copy[this.props.language].toolbar.title;
-    const isTags = this.props.tags && (this.props.tags.children > 0);
+    const isTags = this.props.tags && this.props.tags.children;
 
     return (
       <div className="toolbar">
         <div className="toolbar-header"><p>{title}</p></div>
         <div className="toolbar-tabs">
           {/*this.renderToolbarTab(0, 'search')*/}
-          {this.renderToolbarTab(0, 'Narratives')}
-          {(isTags) ? this.renderToolbarTab(1, 'Explore by tag') : ''}
+          {this.renderToolbarTab(0, 'Narratives', 'timeline')}
+          {(isTags) ? this.renderToolbarTab(1, 'Explore by tag', 'style') : ''}
         </div>
         <ToolbarBottomActions
           sites={{
diff --git a/src/reducers/schema/eventSchema.js b/src/reducers/schema/eventSchema.js
index 7e9b38a..ae308e0 100644
--- a/src/reducers/schema/eventSchema.js
+++ b/src/reducers/schema/eventSchema.js
@@ -13,7 +13,7 @@ const eventSchema = Joi.object().keys({
     category:         Joi.string().required(),
     narratives:       Joi.array(),
     sources:          Joi.array(),
-    tags:             Joi.string().allow(''),
+    tags:             Joi.array().allow(''),
     comments:         Joi.string().allow(''),
     timestamp:        Joi.string().required(),
 
diff --git a/src/scss/mediaoverlay.scss b/src/scss/mediaoverlay.scss
index 564a18a..d48a851 100644
--- a/src/scss/mediaoverlay.scss
+++ b/src/scss/mediaoverlay.scss
@@ -2,7 +2,6 @@ $panel-width: 800px;
 $panel-height: 700px;
 $vimeo-width: $panel-width - 100;
 $vimeo-height: $panel-height / 2;
-
 $padding: 20px;
 $header-inset: 10px;
 
@@ -21,7 +20,6 @@ $header-inset: 10px;
 }
 
 .mo-container {
-  background-color: rgba(239, 239, 239, 0.9);
   // max-width: $panel-width;
   // min-width: $panel-width;
   // max-height: $panel-height;
@@ -29,7 +27,7 @@ $header-inset: 10px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  height: 80vh;
+  max-height: 80vh;
   max-width: 90vw;
   box-shadow: 0 19px 19px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
 
@@ -37,8 +35,35 @@ $header-inset: 10px;
     flex: 1;
     display: flex;
     flex-direction: column;
+    align-items: center;
+  }
+}
+
+.mo-header {
+  min-height: 42px;
+  max-height: 42px;
+  margin-bottom: 2px;
+  border-radius: 2px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  background-color: black;
+  color: white;
+
+  .mo-header-close {
+    display: flex;
     justify-content: center;
     align-items: center;
+    margin-left: $header-inset + 8px;
+  }
+
+  .mo-header-text {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding-right: $padding;
+    font-family: "Lato", Helvetica, sans-serif;
   }
 }
 
@@ -69,6 +94,7 @@ $header-inset: 10px;
 }
 
 .mo-media-container {
+  background-color: rgba(239, 239, 239, 0.9);
   box-sizing: border-box;
   min-width: 100%;
   max-height: 60vh;
@@ -93,6 +119,13 @@ $header-inset: 10px;
 }
 
 .mo-meta-container {
+  background-color: rgba(239, 239, 239, 0.9);
+  display: flex;
+  justify-content: center;  
+  box-sizing: border-box;
+  min-height: 100px;
+  min-width: $panel-width;
+  max-width: $panel-height;
   display: flex;
   justify-content: center;  
   box-sizing: border-box;
@@ -191,9 +224,8 @@ $header-inset: 10px;
 }
 
 .source-image-container, .source-text-container {
-  padding: 0 10em;
-  display: flex;
-  justify-content: center;
+  padding: $padding;
+  display: inline-block;
   align-items: center;
 }
 
diff --git a/src/scss/timeline.scss b/src/scss/timeline.scss
index 84432c0..72c19e4 100644
--- a/src/scss/timeline.scss
+++ b/src/scss/timeline.scss
@@ -198,6 +198,10 @@
         stroke-dasharray: 1px 2px;
       }
 
+      .datetime {
+        /*transition: transform 0.2s ease;*/
+      }
+
       .event {
         cursor: pointer;
         opacity: .7;
@@ -212,6 +216,7 @@
         stroke: $offwhite;
         stroke-width: 2;
         stroke-dasharray: 5px 2px;
+        transition: transform 0.2s ease;
       }
 
       .coevent {
diff --git a/src/selectors/index.js b/src/selectors/index.js
index 4f03b5e..aec7e5c 100644
--- a/src/selectors/index.js
+++ b/src/selectors/index.js
@@ -33,8 +33,7 @@ export const getTimeRange = state => state.app.filters.timerange
  */
 function isTaggedIn(event, tagFilters) {
   if (event.tags) {
-    const tagsInEvent = event.tags.split(",")
-    const isTagged = tagsInEvent.some((tag) => {
+    const isTagged = event.tags.some((tag) => {
       return tagFilters.find(tF => (tF.key === tag && tF.active))
     })
     return isTagged