fixes hidden scroll bars in metadata editor so jimmy knows he can scr…

…oll; styles pagination size dropdown and profile preview links
Datawheel · Oct 11, 2019 · 7505d33 · 7505d33
1 parent fc71396
commit 7505d33
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 56 deletions.
diff --git a/packages/cms/src/components/Viz/Table.css b/packages/cms/src/components/Viz/Table.css
@@ -26,7 +26,6 @@ NOTE: ripped from ReactTable
   width: auto;
   /* entire table can scroll horizontally */
   @mixin horizontal-overflow-container;
-  @mixin hide-scrollbars;
   -ms-overflow-style: none;
 }
 

diff --git a/packages/cms/src/member/MetaEditor.css b/packages/cms/src/member/MetaEditor.css
@@ -31,16 +31,26 @@
 }
 
 .cms-sidebar.cms-meta-header {
+  /* sizing */
   padding: var(--gutter-sm) calc(var(--gutter-xs) + var(--gutter-sm));
+  /* positioning */
+  z-index: 1; /* box shadow in front of other elements */
+  /* theming */
   background-color: var(--light-1);
   box-shadow: 1px 0 0 var(--light-2);
-  z-index: 1; /* box shadow in front of other elements */
 
   @mixin dark-mode {
     border-top: 1px solid var(--black);
     background-color: var(--dark-3);
     box-shadow: 1px 0 0 var(--black); /* "border" */
   }
+
+  @mixin min-sm {
+    & .cms-meta-header-inner {
+      position: sticky;
+      top: var(--gutter-xs);
+    }
+  }
 }
 
 /* filters heading */
@@ -171,6 +181,34 @@
   }
 }
 
+/* list of URLs */
+.cms-meta-table-list {
+  @mixin list-reset;
+}
+.cms-meta-table-item {
+  display: block;
+
+  &:first-child:not(:last-child):after {
+    @mixin font-xxs;
+    content: ", ";
+    display: inline;
+  }
+}
+.cms-meta-table-link {
+  font-weight: var(--display-font-weight);
+  letter-spacing: 0.01em;
+  color: var(--accent);
+
+  &:hover, &:focus {
+    text-decoration: underline;
+    color: var(--accent-dark);
+
+    @mixin dark-mode {
+      color: var(--accent-light);
+    }
+  }
+}
+
 /* searching for images */
 .cms-meta-popover {
   will-change: width;

diff --git a/packages/cms/src/member/MetaEditor.jsx b/packages/cms/src/member/MetaEditor.jsx
@@ -185,7 +185,6 @@ class MetaEditor extends Component {
         }
       }
     }
-
   }
 
   fetchStringifiedSourceData(sourceData) {
@@ -226,14 +225,15 @@ class MetaEditor extends Component {
     return cell.value;
   }
   columnWidths(key) {
-    if (key.includes("keywords") || key.includes("meta") || key.includes("attr")) return 160;
+    if (key.includes("preview")) return 220;
+    else if (key.includes("keywords") || key.includes("meta") || key.includes("attr")) return 160;
     else if (key.includes("zvalue") || key.includes("image") || key.includes("dimension") || key.includes("hierarchy")) return 120;
     else return 90;
   }
   numericSort(a, b) {
     if (!isNaN(a) && !isNaN(b)) {
       return Number(a) - Number(b);
-    } 
+    }
     else return a.localeCompare(b);
   }
   renderColumn(col) {
@@ -340,9 +340,16 @@ class MetaEditor extends Component {
         }
         displayColumns.push({
           id: field,
-          Header: this.renderHeader("preview"),
+          Header: this.renderHeader("preview link"),
+          minWidth: this.columnWidths("preview"),
           accessor: d => this.linkify.bind(this)(d),
-          Cell: cell => <ul>{cell.value.map(url => <li key={url}><a href={url}>{url}</a></li>)}</ul>
+          Cell: cell => <ul className="cms-meta-table-list">
+            {cell.value.map(url =>
+              <li className="cms-meta-table-item" key={url}>
+                <a className="cms-meta-table-link u-font-xxs" href={url}>{url}</a>
+              </li>
+            )}
+          </ul>
         });
       }
       else if (field === "content") {
@@ -483,7 +490,7 @@ class MetaEditor extends Component {
         url += `&dimension=${filterBy}`;
       }
       else if (filterKey === "hierarchy") {
-        url += `&levels=${filterBy}`; 
+        url += `&levels=${filterBy}`;
       }
     }
     this.setState({querying: true});
@@ -492,7 +499,7 @@ class MetaEditor extends Component {
       const page = 0;
       this.setState({data, filterKey, page, querying: false});
     });
-    
+
   }
 
   resetFiltering() {
@@ -502,6 +509,10 @@ class MetaEditor extends Component {
     this.setState({query: ""}, this.processFiltering.bind(this));
   }
 
+  selectPaginationSize(e) {
+    this.setState({pageSize: e.target.value});
+  }
+
   onChange(field, e) {
     if (field === "query") {
       let typingTimeout = null;
@@ -546,54 +557,65 @@ class MetaEditor extends Component {
     return (
       <div className="cms-panel meta-editor">
         <div className="cms-sidebar cms-meta-header">
-          <h1 className="u-visually-hidden">Edit entities</h1>
-          <h2 className="cms-meta-header-heading u-margin-top-off u-font-xs">Filters</h2>
-          <Button
-            className="cms-meta-header-button"
-            onClick={this.resetFiltering.bind(this)}
-            disabled={query === "" && filterBy === "all"}
-            namespace="cms"
-            fontSize="xxs"
-            icon="cross"
-            iconOnly
-          >
-            Clear all filters
-          </Button>
-
-          <div className="cms-meta-controls">
-            <FilterSearch
-              label="filter by name, slug, keywords..."
-              onChange={this.onChange.bind(this, "query")}
-              onReset={this.resetQuery.bind(this)}
-              value={query}
-              namespace="cms"
-              fontSize="xs"
-            />
-
-            <Select
-              label={filterKey === "dimension" ? "Dimension" : "Subdimension"}
-              inline
-              fontSize="xs"
+          <div className="cms-meta-header-inner">
+            <h1 className="u-visually-hidden">Edit entities</h1>
+            <h2 className="cms-meta-header-heading u-margin-top-off u-font-xs">Filters</h2>
+            <Button
+              className="cms-meta-header-button"
+              onClick={this.resetFiltering.bind(this)}
+              disabled={query === "" && filterBy === "all"}
               namespace="cms"
-              value={filterBy}
-              onChange={this.onChange.bind(this, "filterBy")}
+              fontSize="xxs"
+              icon="cross"
+              iconOnly
             >
-              <option key="all" value="all">All</option>
-              {Object.keys(dimensions).map(dim =>
-                <optgroup key={dim} label={dim}>
-                  {/* show the dimension as the first option in each group */}
-                  <option key={`dimension_${dim}`} value={`dimension_${dim}`}>{dim}</option>
-                  {/* Show indented subdimensions */}
-                  {dimensions[dim].map(hierarchy =>
-                    !dimensions[dim].includes(dim) || dimensions[dim].length !== 1
-                      ? <option key={`hierarchy_${hierarchy}`} value={`hierarchy_${hierarchy}`}>   {hierarchy}</option>
-                      : ""
-                  )}
-                </optgroup>
-
-              )}
-            </Select>
+              Clear all filters
+            </Button>
+
+            <div className="cms-meta-controls">
+              <FilterSearch
+                label="filter by name, slug, keywords..."
+                onChange={this.onChange.bind(this, "query")}
+                onReset={this.resetQuery.bind(this)}
+                value={query}
+                namespace="cms"
+                fontSize="xs"
+              />
 
+              <Select
+                label={filterKey === "dimension" ? "Dimension" : "Subdimension"}
+                inline
+                fontSize="xs"
+                namespace="cms"
+                value={filterBy}
+                onChange={this.onChange.bind(this, "filterBy")}
+              >
+                <option key="all" value="all">All</option>
+                {Object.keys(dimensions).map(dim =>
+                  <optgroup key={dim} label={dim}>
+                    {/* show the dimension as the first option in each group */}
+                    <option key={`dimension_${dim}`} value={`dimension_${dim}`}>{dim}</option>
+                    {/* Show indented subdimensions */}
+                    {dimensions[dim].map(hierarchy =>
+                      !dimensions[dim].includes(dim) || dimensions[dim].length !== 1
+                        ? <option key={`hierarchy_${hierarchy}`} value={`hierarchy_${hierarchy}`}>   {hierarchy}</option>
+                        : ""
+                    )}
+                  </optgroup>
+
+                )}
+              </Select>
+
+              <Select
+                label="Number of rows"
+                inline
+                fontSize="xs"
+                namespace="cms"
+                value={pageSize}
+                onChange={e => this.selectPaginationSize(e)}
+                options={[ROWS_PER_PAGE, 25, 50, 100]}
+              />
+            </div>
           </div>
         </div>
 
@@ -607,9 +629,8 @@ class MetaEditor extends Component {
             columns={columns}
             pageSize={pageSize < data.length ? pageSize : data.length}
             onPageSizeChange={(pageSize, pageIndex) => this.setState({pageSize, pageIndex})}
-            showPageSizeOptions={true}
-            pageSizeOptions={[ROWS_PER_PAGE, 25, 50, 100]}
             showPagination={data.length > pageSize}
+            showPageSizeOptions={false}
           />
         </div>