Merge pull request #1086 from dabeng/ie-list-view

feat(inline edit): add inline-edit in a list view
patternfly · Jul 2, 2018 · 34a6115 · 34a6115
2 parents ecd512f + 4e124bc
commit 34a6115
Show file tree

Hide file tree

Showing 10 changed files with 741 additions and 0 deletions.
diff --git a/backstop/config/scenarios/inline-edit-for-list-view.js b/backstop/config/scenarios/inline-edit-for-list-view.js
@@ -0,0 +1,15 @@
+module.exports = [{
+  label: 'inline-edit-list-view',
+  url: 'dist/tests/inline-edit-for-list-view.html',
+  removeSelectors: ['.page-header + .alert']
+}, {
+  label: 'inline-edit-list-view-edit-item',
+  url: 'dist/tests/inline-edit-for-list-view.html',
+  removeSelectors: ['.page-header + .alert'],
+  clickSelector: '.list-view-pf-create + .list-view-pf-editable .list-view-pf-edit'
+}, {
+  label: 'inline-edit-list-view-create-item',
+  url: 'dist/tests/inline-edit-for-list-view.html',
+  removeSelectors: ['.page-header + .alert'],
+  clickSelector: '#add-a-row'
+}]
diff --git a/...ackstop_default_inline-edit-list-view-create-item_0_document_0_large-device.png b/...ackstop_default_inline-edit-list-view-create-item_0_document_0_large-device.png
diff --git a/.../backstop_default_inline-edit-list-view-edit-item_0_document_0_large-device.png b/.../backstop_default_inline-edit-list-view-edit-item_0_document_0_large-device.png
diff --git a/..._reference/backstop_default_inline-edit-list-view_0_document_0_large-device.png b/..._reference/backstop_default_inline-edit-list-view_0_document_0_large-device.png
diff --git a/src/less/list-view.less b/src/less/list-view.less
@@ -302,3 +302,89 @@
   position: relative;
   width: 100%;
 }
+.list-view-pf-editable {
+  &.active,
+  &.list-view-pf-create {
+    .list-view-pf-editor,
+    .list-view-pf-editor.bootstrap-select,
+    .bootstrap-switch,
+    .list-view-pf-actions .list-view-pf-save,
+    .list-view-pf-actions .list-view-pf-cancel {
+      display: initial;
+    }
+    .list-view-pf-edit,
+    .list-view-pf-value:not(.list-view-pf-readonly),
+    .dropdown-kebab-pf {
+      display: none;
+    }
+  }
+  .list-view-pf-editor,
+  .list-view-pf-editor.bootstrap-select,
+  .bootstrap-switch,
+  .list-view-pf-actions .list-view-pf-save,
+  .list-view-pf-actions .list-view-pf-cancel {
+    display: none;
+  }
+  &.active {
+    .list-view-pf-additional-info {
+      @media (min-width: @screen-sm-min) {
+        margin-top: (@grid-gutter-width/2);
+      }
+      @media (min-width: @screen-md-min) {
+        margin-top: 0;
+      }
+      .list-view-pf-additional-info-item {
+        margin-top: (@grid-gutter-width/2);
+        @media (min-width: @screen-sm-min) {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+  .list-view-pf-textbox {
+    margin-right: (@grid-gutter-width/2);
+    width: 100%;
+  }
+  .list-view-pf-readonly {
+    color: @color-pf-black-500;
+  }
+  .list-view-pf-actions {
+    margin: (@grid-gutter-width/4) 0;
+    width: 100px;
+    text-align: right;
+    .list-view-pf-save,
+    .list-view-pf-cancel {
+      font-size: @font-size-h1;
+      @media (max-width: @screen-sm-min) {
+        margin-left: 0;
+      }
+    }
+  }
+  .list-view-pf-description {
+    flex: 100%;
+    @media (min-width: @screen-sm-min) {
+      flex: 100%;
+    }
+    @media (min-width: @screen-md-min) {
+      flex: 25%;
+    }
+  }
+  .list-view-pf-additional-info {
+    flex: 100%;
+    .list-view-pf-additional-info-item {
+      flex: 100%;
+    }
+    @media (min-width: @screen-sm-min) {
+      flex: 100%;
+      .list-view-pf-additional-info-item {
+        flex: 1;
+      }
+    }
+    @media (min-width: @screen-md-min) {
+      flex: 75%;
+      .list-view-pf-additional-info-item {
+        flex: 1;
+      }
+    }
+  }
+}
diff --git a/src/sass/converted/patternfly/_list-view.scss b/src/sass/converted/patternfly/_list-view.scss
@@ -302,3 +302,89 @@
   position: relative;
   width: 100%;
 }
+.list-view-pf-editable {
+  &.active,
+  &.list-view-pf-create {
+    .list-view-pf-editor,
+    .list-view-pf-editor.bootstrap-select,
+    .bootstrap-switch,
+    .list-view-pf-actions .list-view-pf-save,
+    .list-view-pf-actions .list-view-pf-cancel {
+      display: initial;
+    }
+    .list-view-pf-edit,
+    .list-view-pf-value:not(.list-view-pf-readonly),
+    .dropdown-kebab-pf {
+      display: none;
+    }
+  }
+  .list-view-pf-editor,
+  .list-view-pf-editor.bootstrap-select,
+  .bootstrap-switch,
+  .list-view-pf-actions .list-view-pf-save,
+  .list-view-pf-actions .list-view-pf-cancel {
+    display: none;
+  }
+  &.active {
+    .list-view-pf-additional-info {
+      @media (min-width: $screen-sm-min) {
+        margin-top: ($grid-gutter-width/2);
+      }
+      @media (min-width: $screen-md-min) {
+        margin-top: 0;
+      }
+      .list-view-pf-additional-info-item {
+        margin-top: ($grid-gutter-width/2);
+        @media (min-width: $screen-sm-min) {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+  .list-view-pf-textbox {
+    margin-right: ($grid-gutter-width/2);
+    width: 100%;
+  }
+  .list-view-pf-readonly {
+    color: $color-pf-black-500;
+  }
+  .list-view-pf-actions {
+    margin: ($grid-gutter-width/4) 0;
+    width: 100px;
+    text-align: right;
+    .list-view-pf-save,
+    .list-view-pf-cancel {
+      font-size: $font-size-h1;
+      @media (max-width: $screen-sm-min) {
+        margin-left: 0;
+      }
+    }
+  }
+  .list-view-pf-description {
+    flex: 100%;
+    @media (min-width: $screen-sm-min) {
+      flex: 100%;
+    }
+    @media (min-width: $screen-md-min) {
+      flex: 25%;
+    }
+  }
+  .list-view-pf-additional-info {
+    flex: 100%;
+    .list-view-pf-additional-info-item {
+      flex: 100%;
+    }
+    @media (min-width: $screen-sm-min) {
+      flex: 100%;
+      .list-view-pf-additional-info-item {
+        flex: 1;
+      }
+    }
+    @media (min-width: $screen-md-min) {
+      flex: 75%;
+      .list-view-pf-additional-info-item {
+        flex: 1;
+      }
+    }
+  }
+}
diff --git a/tests/pages/_includes/widgets/layouts/toolbar.html b/tests/pages/_includes/widgets/layouts/toolbar.html
@@ -40,6 +40,11 @@
                 <button class="btn btn-default" id="collapse-tree" type="button">Collapse All</button>
               </div>
               {% endif %}
+              {% if include.inlineEdit %}
+              <div class="form-group">
+                <button class="btn btn-primary" id="add-a-row" type="button">Create</button>
+              </div>
+              {% endif %}
               <div class="toolbar-pf-action-right">
                 <div class="form-group toolbar-pf-find">
                   <button class="btn btn-link btn-find" type="button">

diff --git a/tests/pages/_includes/widgets/list-view/list-view-page-inline-edit.html b/tests/pages/_includes/widgets/list-view/list-view-page-inline-edit.html
@@ -0,0 +1,5 @@
+{% include widgets/layouts/navbar-primary.html %}
+{% include widgets/layouts/toolbar.html inlineEdit = true %}
+<div class="container-fluid">
+{% include widgets/list-view/list-view-rows-inline-edit.html %}
+</div>