Fixed layout of Compas Versions Editor.

Signed-off-by: Dennis Labordus <[email protected]>

Author: Dennis Labordus

__snapshots__/compas-versions-plugin.md

@@ -59,72 +59,88 @@
 ####   `looks like the latest snapshot`
 
 ```html
+<h1>
+  <nav>
+    <abbr title="[compas.versions.addVersionButton]">
+      <mwc-icon-button icon="playlist_add">
+      </mwc-icon-button>
+    </abbr>
+  </nav>
+  <nav>
+    <abbr title="[compas.versions.deleteProjectButton]">
+      <mwc-icon-button icon="delete_forever">
+      </mwc-icon-button>
+    </abbr>
+  </nav>
+</h1>
 <div id="containerCompasVersions">
   <section tabindex="0">
     <h1>
       [compas.versions.title]
-      <mwc-icon-button icon="note_add">
-      </mwc-icon-button>
-      <mwc-icon-button icon="delete_forever">
-      </mwc-icon-button>
     </h1>
-    <mwc-list>
-      <mwc-list-item
+    <mwc-list multi="">
+      <mwc-check-list-item
         aria-disabled="false"
-        graphic="control"
+        graphic="icon"
         mwc-list-item=""
         tabindex="0"
+        value="1.0.0"
       >
         demo_station1 (1.0.0)
-        <span
-          slot="graphic"
-          style="width: 90px"
-        >
+        <span slot="graphic">
           <mwc-icon>
             restore
           </mwc-icon>
           <mwc-icon>
             delete
           </mwc-icon>
         </span>
-      </mwc-list-item>
-      <mwc-list-item
+      </mwc-check-list-item>
+      <mwc-check-list-item
         aria-disabled="false"
-        graphic="control"
+        graphic="icon"
         mwc-list-item=""
         tabindex="-1"
+        value="2.0.0"
       >
         demo_station1 (2.0.0)
-        <span
-          slot="graphic"
-          style="width: 90px"
-        >
+        <span slot="graphic">
           <mwc-icon>
             restore
           </mwc-icon>
           <mwc-icon>
             delete
           </mwc-icon>
         </span>
-      </mwc-list-item>
-      <mwc-list-item
+      </mwc-check-list-item>
+      <mwc-check-list-item
         aria-disabled="false"
-        graphic="control"
+        graphic="icon"
         mwc-list-item=""
         tabindex="-1"
+        value="2.1.0"
       >
         3b572a56-51cc-479b-97fd-e404ebf9ae67 (2.1.0)
-        <span
-          slot="graphic"
-          style="width: 90px"
-        >
+        <span slot="graphic">
           <mwc-icon>
             restore
           </mwc-icon>
         </span>
-      </mwc-list-item>
+      </mwc-check-list-item>
     </mwc-list>
   </section>
+  <mwc-fab
+    extended=""
+    icon="compare"
+    label="[compas.versions.compareButton]"
+  >
+  </mwc-fab>
+  <mwc-fab
+    extended=""
+    icon="compare"
+    label="[compas.versions.compareCurrentButton]"
+  >
+  </mwc-fab>
 </div>
 <wizard-dialog>
 </wizard-dialog>

public/md/CoMPAS-Versions-Editor.md

@@ -1,4 +1,5 @@
 In the CoMPAS Editor the different versions of an SCL XML File are shown that are stored in CoMPAS.
+Different actions can be done in this screen.
 
 - <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M13 3c-4.97 0-9 4.03-9 9H1l4 3.99L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.25 2.52.77-1.28-3.52-2.09V8z"/></svg>: 
   Restore a specific version from CoMPAS. <br/>
@@ -8,10 +9,16 @@ In the CoMPAS Editor the different versions of an SCL XML File are shown that ar
 - <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z"/></svg>: 
   Remove a specific version from CoMPAS.<br/>
   By pressing the icon and confirming the action that specific version will be removed from CoMPAS.
-- <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M13 11h-2v3H8v2h3v3h2v-3h3v-2h-3zm1-9H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"/></svg>:
+- <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M14,10H3v2h11V10z M14,6H3v2h11V6z M18,14v-4h-2v4h-4v2h4v4h2v-4h4v-2H18z M3,16h7v-2H3V16z"/></g></svg>:
   Add version from filesystem.<br/>
   By pressing the icon you can select an XML SCL File from your local system to become the latest version for current SCL XML File loaded from CoMPAS.<br/>
   Remark: The full XML will be replaced, including the history and CoMPAS Extensions, like filename.
 - <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M14.12 10.47L12 12.59l-2.13-2.12-1.41 1.41L10.59 14l-2.12 2.12 1.41 1.41L12 15.41l2.12 2.12 1.41-1.41L13.41 14l2.12-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4zM6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9z"/></svg>:
   Remove the SCL XML File completely from CoMPAS, all versions.<br/>
   By pressing the icon and confirming the action all versions will be removed from CoMPAS.
+
+Beside these icons to execute actions, it's also possible to compare versions with each other. 
+Select two versions by checking the checkbox and press the button "Compare versions" to see the differences between these two versions. 
+
+The current version opened (and changed) can also be compared to a specific version. 
+Select one version by checking the checkbox and press the button "Compare versions (current)" to see the differences between current version and the selected version.

src/compas-editors/CompasVersions.ts

@@ -55,10 +55,10 @@ export default class CompasVersionsPlugin extends LitElement {
 
   private getSelectedVersions(): Array<string> {
     const selectedVersions: Array<string> = [];
-    this.shadowRoot!.querySelectorAll('mwc-checkbox')
-      .forEach(checkbox => {
-        if (checkbox.checked) {
-          selectedVersions.push(checkbox.value);
+    this.shadowRoot!.querySelectorAll('mwc-check-list-item')
+      .forEach(checkListItem => {
+        if (checkListItem.selected) {
+          selectedVersions.push(checkListItem.value);
         }
       });
     return selectedVersions;
@@ -148,7 +148,7 @@ export default class CompasVersionsPlugin extends LitElement {
       <div id="containerCompasVersions">
         <section tabindex="0">
           <h1>${translate('compas.versions.title')}</h1>
-          <mwc-list>
+          <mwc-list multi>
             ${this.scls.map( (item, index, items) => {
                 let element = getElementByName(item, SDS_NAMESPACE, "Name");
                 if (element === null) {
@@ -157,30 +157,30 @@ export default class CompasVersionsPlugin extends LitElement {
                 const name = element!.textContent ?? '';
                 const version = getElementByName(item, SDS_NAMESPACE, "Version")!.textContent ?? '';
                 if (items.length - 1 === index) {
-                  return html`<mwc-list-item tabindex="0"
-                                             graphic="control">
+                  return html`<mwc-check-list-item value="${version}"
+                                                   tabindex="0"
+                                                   graphic="icon">
                                 ${name} (${version})
                                 <span slot="graphic">
-                                  <mwc-checkbox value="${version}"></mwc-checkbox>
                                   <mwc-icon @click=${() => {
                                               this.confirmRestoreVersionCompas(version);
                                             }}>restore</mwc-icon>
                                 </span>
-                              </mwc-list-item>`
+                              </mwc-check-list-item>`
                 }
-                return html`<mwc-list-item tabindex="0"
-                                           graphic="control">
+                return html`<mwc-check-list-item value="${version}"
+                                                 tabindex="0"
+                                                 graphic="icon">
                                 ${name} (${version})
                                 <span slot="graphic">
-                                  <mwc-checkbox value="${version}"></mwc-checkbox>
                                   <mwc-icon @click=${() => {
                                               this.confirmRestoreVersionCompas(version);
                                             }}>restore</mwc-icon>
                                   <mwc-icon @click=${() => {
                                               this.confirmDeleteVersionCompas(version);
                                             }}>delete</mwc-icon>
                                 </span>
-                            </mwc-list-item>`
+                            </mwc-check-list-item>`
             })}
           </mwc-list>
         </section>
@@ -212,22 +212,31 @@ export default class CompasVersionsPlugin extends LitElement {
       border-bottom: none;
     }
 
-    [mwc-list-item] {
-      --mdc-list-item-graphic-size: 60px;
-      --mdc-list-item-graphic-margin: 40px;
-    }
-
     #containerCompasVersions {
       padding: 8px 12px 16px;
       box-sizing: border-box;
-      grid-template-columns: repeat(auto-fit, minmax(400px, auto));
+      grid-template-columns: repeat(auto-fit, minmax(316px, auto));
     }
 
     @media (max-width: 387px) {
       #containerCompasVersions {
         grid-template-columns: repeat(auto-fit, minmax(196px, auto));
       }
     }
+
+    mwc-check-list-item {
+      padding-left: 60px;
+    }
+
+    mwc-check-list-item > span {
+      width: 90px;
+      text-align: left;
+    }
+
+    mwc-fab {
+      float: right;
+      margin: 5px 5px 5px 5px
+    }
   `;
 }
 

src/translations/en.ts

@@ -429,10 +429,10 @@ export const en = {
       confirmButton: 'Confirm',
       compareButton: 'Compare versions',
       selectTwoVersionsTitle: 'Select two versions?',
-      selectTwoVersionsMessage: 'Select maximum two versions to compare with each other. Currently {{size}} versions is/are selected.',
+      selectTwoVersionsMessage: 'Select maximum two versions to compare with each other. Currently selected: {{size}}.',
       compareCurrentButton: 'Compare version (current)',
       selectOneVersionsTitle: 'Select one version?',
-      selectOneVersionsMessage: 'Select maximum one version to compare the current project against. Currently {{size}} versions is/are selected.',
+      selectOneVersionsMessage: 'Select maximum one version to compare the current project against. Currently selected: {{size}}.',
     },
     compare: {
       title: 'Compare version {{leftVersion}} with version {{rightVersion}}',

test/integration/compas-editors/CompasVersions.test.ts

@@ -117,26 +117,26 @@ describe('compas-versions-plugin', () => {
     });
 
     it('has 3 item entries', () => {
-      expect(element.shadowRoot!.querySelectorAll('mwc-list > mwc-list-item'))
+      expect(element.shadowRoot!.querySelectorAll('mwc-list > mwc-check-list-item'))
         .to.have.length(3);
     });
 
     it('first entry has correct buttons', () => {
-      expect(element.shadowRoot!.querySelectorAll('mwc-list > mwc-list-item').length)
+      expect(element.shadowRoot!.querySelectorAll('mwc-list > mwc-check-list-item').length)
         .to.be.greaterThan(1);
       // Retrieve the first item after checking that there are items.
-      const item = element.shadowRoot!.querySelectorAll('mwc-list > mwc-list-item')[0];
+      const item = element.shadowRoot!.querySelectorAll('mwc-list > mwc-check-list-item')[0];
       // There should be 2 buttons, first the restore, second the delete.
       expect(item.querySelectorAll('span > mwc-icon')).to.have.length(2);
       expect(item.querySelectorAll('span > mwc-icon')[0].textContent).to.be.equal('restore');
       expect(item.querySelectorAll('span > mwc-icon')[1].textContent).to.be.equal('delete');
     });
 
     it('last entry has one buttons', () => {
-      expect(element.shadowRoot!.querySelectorAll('mwc-list > mwc-list-item'))
+      expect(element.shadowRoot!.querySelectorAll('mwc-list > mwc-check-list-item'))
         .to.have.length(3);
       // Retrieve the last item after checking that there are 3 items.
-      const item = element.shadowRoot!.querySelectorAll('mwc-list > mwc-list-item')[2];
+      const item = element.shadowRoot!.querySelectorAll('mwc-list > mwc-check-list-item')[2];
       // There should be 1 buttons, the restore button.
       expect(item.querySelectorAll('span > mwc-icon')).to.have.length(1);
       expect(item.querySelectorAll('span > mwc-icon')[0].textContent).to.be.equal('restore');