Updates to the editor UI

nikkimk · nikkimk · commit 98f56bf63643 · 2018-10-17T10:58:11.000-04:00
diff --git a/bower.json b/bower.json
@@ -22,7 +22,8 @@
     "paper-slider": "PolymerElements/paper-slider#^2.0.4",
     "dropdown-select": "LRNWebComponents/dropdown-select#^1.0.5",
     "iron-collapse": "PolymerElements/iron-collapse#^2.2.1",
-    "paper-icon-button": "PolymerElements/paper-icon-button#^2.2.0"
+    "paper-icon-button": "PolymerElements/paper-icon-button#^2.2.0",
+    "a11y-collapse": "LRNWebComponents/a11y-collapse#^1.0.1"
   },
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
diff --git a/demo/index.html b/demo/index.html
@@ -29,7 +29,7 @@
   <body>
     <div class="vertical-section-container centered">
       <h1>editable-table demo</h1>
-      <p>This is a component that allows you to switch between <a href="display.html">editable-table-display</a> and <a href="editor.html">editable-table-editor</a> modes. (See <a href="/components/editable-table/">documentation</a> for more information.)</p>
+      <p>This is a component that allows you to switch between <a href="display.html">editable-table-display</a> and <a href="editor.html">editable-table-editor</a> modes. (See <a href="index.html">documentation</a> for more information.)</p>
       <demo-snippet>
         <template>
           <div id="table1toggle">
diff --git a/editable-table-display.html b/editable-table-display.html
@@ -253,7 +253,6 @@
         * sets a column's cells to filtered when in filtered mode so that filter can toggle
         */
       _isFiltered: function(column,filterColumn,filtered){
-        console.log('_isFiltered',column,filterColumn,filtered,filterColumn !== null && filterColumn === column && filtered)
         return filterColumn !== null && filterColumn === column && filtered;
       },
 
@@ -362,7 +361,6 @@
         * Handle filter based on collumn and text of cell that is clicked
         */
       filterRows: function(filterColumn,filterText){
-        console.log('filterRows',this.filterColumn,filterText);
         if(filterColumn !== null && filterText !== null) {
           return function(tr) {
             return tr[filterColumn].toLowerCase().trim() === filterText.toLowerCase().trim();
@@ -377,7 +375,6 @@
         * Handle filter button click
         */
       toggleFilter: function(e){
-        console.log('toggleFilter',this.filterColumn,e.detail.columnNumber);
         if(this.filterColumn == e.detail.columnNumber && this.filtered){
           this.filtered = false;
           this.filterText = null;
diff --git a/editable-table-editor-toggle.html b/editable-table-editor-toggle.html
@@ -32,9 +32,8 @@
         display: block;
       }
       :host .setting {
-        min-height: 40px;
         font-size: 95%;
-        padding: var(--editable-table-toggle-padding, 0px 16px);
+        padding: var(--editable-table-toggle-padding, 8px 0px);
         justify-content: space-between;
         width: 100%;
       }
diff --git a/editable-table-editor.html b/editable-table-editor.html
@@ -6,6 +6,7 @@
 <link rel="import" href="../simple-colors/simple-colors.html">
 <link rel="import" href="../responsive-utility/responsive-utility-behaviors.html">
 <link rel="import" href="../iron-icons/iron-icons.html">
+<link rel="import" href="../a11y-collapse/a11y-collapse.html">
 <link rel="import" href="editable-table-behaviors.html">
 <link rel="import" href="editable-table-editor-rowcol.html">
 <link rel="import" href="editable-table-editor-toggle.html">
@@ -55,12 +56,27 @@
 <dom-module id="editable-table-editor">
   <template>
     <style is="custom-style" include="editable-table-styles">
+      :host {
+        --a11y-collapse-border: 1px solid #ddd;
+        --a11y-collapse-horizontal-padding: 0;
+        --a11y-collapse: {
+          margin: 0em;
+        };
+        --a11y-collapse-heading-focus: {
+          background-color: #f0f0f0;
+        };
+      }
       :host, 
       :host paper-item {
         font-size: 12pt;
       }
       :host dropdown-select {
-        padding: 0 16px;
+        padding: 0;
+      }
+      :host #accent {
+        --paper-input-container: { 
+          padding-top: 0; 
+        };
       }
       :host[responsive-size="xs"] editable-table-editor-settings {
         padding: 3px 0;
@@ -110,11 +126,17 @@
         flex-shrink: 1;
         transition: width 2s;
       }
+      :host .field-group-label {
+       padding-right: 0.5em;
+       font-weight: bold;
+      }
       :host .field-group label {
         line-height: 30px;
       }
-      :host .caption {
+      :host #caption {
         padding: 0em;
+        display: inline-block;
+        width: unset;
       }
       :host .caption.field-group {
         margin-bottom: 0;
@@ -169,130 +191,134 @@
     </style>
     <p class="sr-only">Table Editor</p>
     <p class="field-group">
-      <label aria-hidden="true" class="field-group-padding">Table Summary (for accessibility): </label>
+      <label aria-hidden="true" class="field-group-label">Table Caption </label>
+      <iron-autogrow-textarea id="caption" 
+        class="field-group-grow caption" 
+        label="Table Caption" 
+        placeholder="A title for the table." 
+        value$="{{caption}}">
+      </iron-autogrow-textarea>
+    </p>
+    <p class="field-group">
+      <label aria-hidden="true" class="field-group-label">Table Summary (for accessibility) </label>
       <iron-autogrow-textarea id="summary" 
         class="field-group-grow" 
         label="Table Summary (for accessibility)" 
         placeholder="Describe what the table contains. What does each row represent? What does each column represent?"
         value$="{{summary}}">
       </iron-autogrow-textarea>
     </p>
-    <div class="field-group field-group-stretch">
-      <div class="field-group-border field-group-grow">
-        <label class="">Headers and Footers: </label>
-        <editable-table-editor-toggle 
-          label="First Column" 
-          prop="rowHeader" 
-          tooltip="The first column is a row header."
-          value$="{{rowHeader}}">
-        </editable-table-editor-toggle>
-        <editable-table-editor-toggle
-          label="First Row" 
-          prop="columnHeader" 
-          tooltip="The first row is a column header."
-          value$="{{columnHeader}}">
-        </editable-table-editor-toggle>
-        <editable-table-editor-toggle
-          hidden$="[[hideFooter]]"
-          label="Last Row" 
-          prop="footer" 
-          tooltip="The last row is a table footer."
-          value$="{{footer}}">
-        </editable-table-editor-toggle>
-      </div>
-      <div class="field-group-border field-group-grow" hidden$="[[hideTableTheme]]">
-        <label>Theme: </label>
-        <div class="field-group-grow">
-          <dropdown-select id="accent" label="Accent Color" value$="{{accentColor}}">
-            <paper-item value="none">None</paper-item>
-            <paper-item value="red">Red</paper-item>
-            <paper-item value="pink">Pink</paper-item>
-            <paper-item value="purple">Purple</paper-item>
-            <paper-item value="deep-purple">Deep Purple</paper-item>
-            <paper-item value="indigo">Indigo</paper-item>
-            <paper-item value="blue">Blue</paper-item>
-            <paper-item value="light-blue">Light Blue</paper-item>
-            <paper-item value="cyan">Cyan</paper-item>
-            <paper-item value="teal">Teal</paper-item>
-            <paper-item value="green">Green</paper-item>
-            <paper-item value="light-green">Light Green</paper-item>
-            <paper-item value="lime">Lime</paper-item>
-            <paper-item value="yellow">Yellow</paper-item>
-            <paper-item value="amber">Amber</paper-item>
-            <paper-item value="orange">Orange</paper-item>
-            <paper-item value="deep-orange">Deep Orange</paper-item>
-            <paper-item value="brown">Deep Orange</paper-item>
-            <paper-item value="blue-grey">Blue-Grey</paper-item>
-          </dropdown-select>
-        </div>
-        <paper-tooltip for="accent">Set an accent color for the table.</paper-tooltip>
-        <editable-table-editor-toggle
-          hidden$="[[hideDarkTheme]]"
-          label="Dark" 
-          prop="dark" 
-          tooltip="Use the dark theme."
-          value$="{{dark}}">
-        </editable-table-editor-toggle>
-      </div>
-      <div class="field-group-border field-group-grow" hidden$="[[hideTableStyles]]">
-        <label>Styles: </label>
-        <editable-table-editor-toggle
-          hidden$="[[hideBordered]]"
-          label="Bordered" 
-          prop="bordered" 
-          tooltip="Add borders to cells."
-          value$="{{bordered}}">
-        </editable-table-editor-toggle>
-        <editable-table-editor-toggle
-          hidden$="[[hideStriped]]"
-          label="Striped" 
-          prop="striped" 
-          tooltip="Add shading to alternating rows."
-          value$="{{striped}}">
-        </editable-table-editor-toggle>
-        <editable-table-editor-toggle
-          hidden$="[[hideCondensed]]"
-          label="Condensed" 
-          prop="condensed" 
-          tooltip="Condense cell height."
-          value$="{{condensed}}">
-        </editable-table-editor-toggle>
-        <editable-table-editor-toggle
-          hidden$="[[hideScroll]]"
-          label="Disable Responsive" 
-          prop="scroll" 
-          tooltip="Disables the default responsive feature."
-          value$="{{scroll}}">
-        </editable-table-editor-toggle>
-      </div>
-      <div class="field-group-border field-group-grow" hidden$="[[hideTableSort]]">
-        <label>Sorting and Filtering: </label>
-        <editable-table-editor-toggle 
-          disabled$="[[!columnHeader]]"
-          hidden$="[[hideSort]]"
-          label="Enable Sorting" 
-          prop="sort" 
-          tooltip="When first row is a column header, make the column sortable."
-          value$="{{sort}}">
-        </editable-table-editor-toggle>
-        <editable-table-editor-toggle
-          hidden$="[[hideFilter]]"
-          label="Enable Filters" 
-          prop="filter" 
-          tooltip="When a cell is clicked toggle a filter based on that cell's value."
-          value$="{{filter}}">
-        </editable-table-editor-toggle> 
-      </div>
-    </div>
     <div id="table-outer">
-      <p class="field-group caption">
-        <iron-autogrow-textarea id="caption" 
-          class="field-group-grow" 
-          label="Table Caption" 
-          placeholder="A title for the table." 
-          value$="{{caption}}">
-        </iron-autogrow-textarea>
-      </p>
+        <a11y-collapse accordion icon="settings" label="show settings" label-expanded="hide settings" tooltip="Show/hide table settings.">
+          <div slot="heading" class="field-group-label">Table Settings </div>
+          <div class="field-group field-group-stretch">
+            <div class="field-group-border field-group-grow">
+              <label class="">Headers and Footers: </label>
+              <editable-table-editor-toggle 
+                label="First Column" 
+                prop="rowHeader" 
+                tooltip="The first column is a row header."
+                value$="{{rowHeader}}">
+              </editable-table-editor-toggle>
+              <editable-table-editor-toggle
+                label="First Row" 
+                prop="columnHeader" 
+                tooltip="The first row is a column header."
+                value$="{{columnHeader}}">
+              </editable-table-editor-toggle>
+              <editable-table-editor-toggle
+                hidden$="[[hideFooter]]"
+                label="Last Row" 
+                prop="footer" 
+                tooltip="The last row is a table footer."
+                value$="{{footer}}">
+              </editable-table-editor-toggle>
+            </div>
+            <div class="field-group-border field-group-grow" hidden$="[[hideTableTheme]]">
+              <label>Theme: </label>
+              <div class="field-group-grow">
+                <dropdown-select id="accent" label="Accent Color" value$="{{accentColor}}">
+                  <paper-item value="none">None</paper-item>
+                  <paper-item value="red">Red</paper-item>
+                  <paper-item value="pink">Pink</paper-item>
+                  <paper-item value="purple">Purple</paper-item>
+                  <paper-item value="deep-purple">Deep Purple</paper-item>
+                  <paper-item value="indigo">Indigo</paper-item>
+                  <paper-item value="blue">Blue</paper-item>
+                  <paper-item value="light-blue">Light Blue</paper-item>
+                  <paper-item value="cyan">Cyan</paper-item>
+                  <paper-item value="teal">Teal</paper-item>
+                  <paper-item value="green">Green</paper-item>
+                  <paper-item value="light-green">Light Green</paper-item>
+                  <paper-item value="lime">Lime</paper-item>
+                  <paper-item value="yellow">Yellow</paper-item>
+                  <paper-item value="amber">Amber</paper-item>
+                  <paper-item value="orange">Orange</paper-item>
+                  <paper-item value="deep-orange">Deep Orange</paper-item>
+                  <paper-item value="brown">Deep Orange</paper-item>
+                  <paper-item value="blue-grey">Blue-Grey</paper-item>
+                </dropdown-select>
+              </div>
+              <paper-tooltip for="accent">Set an accent color for the table.</paper-tooltip>
+              <editable-table-editor-toggle
+                hidden$="[[hideDarkTheme]]"
+                label="Dark" 
+                prop="dark" 
+                tooltip="Use the dark theme."
+                value$="{{dark}}">
+              </editable-table-editor-toggle>
+            </div>
+            <div class="field-group-border field-group-grow" hidden$="[[hideTableStyles]]">
+              <label>Styles: </label>
+              <editable-table-editor-toggle
+                hidden$="[[hideBordered]]"
+                label="Bordered" 
+                prop="bordered" 
+                tooltip="Add borders to cells."
+                value$="{{bordered}}">
+              </editable-table-editor-toggle>
+              <editable-table-editor-toggle
+                hidden$="[[hideStriped]]"
+                label="Striped" 
+                prop="striped" 
+                tooltip="Add shading to alternating rows."
+                value$="{{striped}}">
+              </editable-table-editor-toggle>
+              <editable-table-editor-toggle
+                hidden$="[[hideCondensed]]"
+                label="Condensed" 
+                prop="condensed" 
+                tooltip="Condense cell height."
+                value$="{{condensed}}">
+              </editable-table-editor-toggle>
+              <editable-table-editor-toggle
+                hidden$="[[hideScroll]]"
+                label="Disable Responsive" 
+                prop="scroll" 
+                tooltip="Disables the default responsive feature."
+                value$="{{scroll}}">
+              </editable-table-editor-toggle>
+            </div>
+            <div class="field-group-border field-group-grow" hidden$="[[hideTableSort]]">
+              <label>Sorting and Filtering: </label>
+              <editable-table-editor-toggle 
+                disabled$="[[!columnHeader]]"
+                hidden$="[[hideSort]]"
+                label="Enable Sorting" 
+                prop="sort" 
+                tooltip="When first row is a column header, make the column sortable."
+                value$="{{sort}}">
+              </editable-table-editor-toggle>
+              <editable-table-editor-toggle
+                hidden$="[[hideFilter]]"
+                label="Enable Filters" 
+                prop="filter" 
+                tooltip="When a cell is clicked toggle a filter based on that cell's value."
+                value$="{{filter}}">
+              </editable-table-editor-toggle> 
+            </div>
+          </div>
+        </a11y-collapse>
       <table id="table" 
         class="table" 
         bordered$="{{bordered}}" 

Original file line number	Diff line number	Diff line change
`@@ -32,9 +32,8 @@`
`32`	`32`	`display: block;`
`33`	`33`	`}`
`34`	`34`	`:host .setting {`
`35`		`- min-height: 40px;`
`36`	`35`	`font-size: 95%;`
`37`		`- padding: var(--editable-table-toggle-padding, 0px 16px);`
	`36`	`+ padding: var(--editable-table-toggle-padding, 8px 0px);`
`38`	`37`	`justify-content: space-between;`
`39`	`38`	`width: 100%;`
`40`	`39`	`}`