biovision-base 0.37.190607.0 → 0.39.190804.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 53f6745ccdb17530c51d58bc412f980bb9ec1e47e54a858a5aa207b117c9f6c1
-  data.tar.gz: 4fb31a1e0780d1984c30225c05f74c24934d706350009a007bb24f8ded0f43e6
+  metadata.gz: 9d5f8617a8dff7ad9626d48a7f1e22cc8f08c2593b217c6c27841ab5aa921d6c
+  data.tar.gz: 01c40c0839b5f499a4230ff5c66ca3b0eda1e5366004f9191d019788eb33262a
 SHA512:
-  metadata.gz: 7b812126a16490736dda1d3af3b38fec3de5bbcaf674c603f571bee8db5274131c77ea6c6420593e1dc9d19a335d0197eb91daa210735935a45d06b075eaf929
-  data.tar.gz: 8d2efd4a4972f0e2a17a0f8fac8b4f403b5d495ef0c94c700914bd1bf5706bad0b901092c1ff591c8e04373f48c741288c731203812320c0bfb82420f787b8d8
+  metadata.gz: bf4038b7bddff5695f12bbe5a98f146a3f2ac6ebbabfa34c35a4f1b3cd66d2b575a04c2b47806638cd6d85110ce0d38f90fecb4ea3bfaa46cc94244edf25b7a1
+  data.tar.gz: 5f506ea490fb45a7e3eb072d9494e66360370b037cdd8605f570108def672749ff4f462946b0e9f9363b889d103edd22ff76e9d207cb75c445a2dbb7ea40d861

data/app/assets/images/biovision/base/icons/components/content.svg

@@ -0,0 +1,20 @@
+<svg version="1.1" viewBox="0 0 24 24" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">
+  <title>Content</title>
+  <defs>
+    <style type="text/css">
+      rect { stroke-width: 1; stroke: #aaa }
+      line { stroke-width: 1 }
+    </style>
+  </defs>
+  <rect x="5" y="2" width="10" height="16" fill="#ddd"/>
+  <rect x="7" y="4" width="10" height="16" fill="#eee"/>
+  <g>
+    <rect x="9" y="6" width="10" height="16" fill="#fff"/>
+    <line x1="11" y1="9" x2="14" y2="9" stroke="#111"/>
+    <line x1="11" y1="11" x2="17" y2="11" stroke="#555"/>
+    <line x1="11" y1="13" x2="17" y2="13" stroke="#555"/>
+    <line x1="11" y1="15" x2="16" y2="15" stroke="#555"/>
+    <line x1="11" y1="18" x2="17" y2="18" stroke="#555"/>
+    <line x1="11" y1="20" x2="17" y2="20" stroke="#555"/>
+  </g>
+</svg>

data/app/assets/images/biovision/base/icons/components/users.svg

@@ -0,0 +1,21 @@
+<svg version="1.1" viewBox="0 0 24 24" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">
+  <title>Users</title>
+  <defs>
+    <style type="text/css">
+      .a { stroke-width: 1; stroke: #aaa; fill: #eee; }
+      .b { stroke-width: 1.5; stroke: #333; fill: #777; }
+    </style>
+  </defs>
+  <g class="a">
+    <ellipse cx="6.5" cy="7" rx="2" ry="3.2"/>
+    <path d="M1,16 Q6.5,8 12,16 z" stroke-linejoin="round"/>
+  </g>
+  <g class="a">
+    <ellipse cx="18.5" cy="7" rx="2" ry="3.2"/>
+    <path d="M13,16 Q18.5,8 23,16 z" stroke-linejoin="round"/>
+  </g>
+  <g class="b">
+    <ellipse cx="12.5" cy="10" rx="3.5" ry="4.5"/>
+    <path d="M3,22 Q12,11 22,22 z" stroke-linejoin="round"/>
+  </g>
+</svg>

data/app/assets/javascripts/biovision/base/biovision.js

@@ -841,151 +841,111 @@ Biovision.components.hidingPopups = {
     }
 };
 
-Biovision.components.componentEditor = {
+Biovision.components.componentParameters = {
     initialized: false,
-    /**
-     * @type {HTMLElement}
-     */
-    list: undefined,
+    container: undefined,
     url: undefined,
+    list: undefined,
     elements: [],
-    values: {},
     init: function () {
-        this.list = document.getElementById('biovision-component-parameters');
-        if (this.list) {
-            const component = this;
-            this.url = this.list.getAttribute('data-url');
-            this.list.querySelectorAll('input[type="text"]').forEach(component.apply);
-
+        this.container = document.getElementById("biovision-component-parameters");
+        if (this.container) {
+            this.url = this.container.getAttribute("data-url");
+            this.list = this.container.querySelector("dl");
+            this.list.querySelectorAll("input").forEach(this.apply);
             this.initialized = true;
         }
     },
     /**
      *
-     * @param element
+     * @param {HTMLElement} element
      * @type {Function}
      */
     apply: function (element) {
-        const component = Biovision.components.componentEditor;
-        const button = element.parentNode.querySelector('button');
-
-        component.values[element.getAttribute('id')] = element.value;
-
+        const component = Biovision.components.componentParameters;
         component.elements.push(element);
-        element.addEventListener('change', component.handleChange);
-        element.addEventListener('keyup', component.keyUp);
-        button.addEventListener('click', component.handleClick);
+        element.addEventListener("change", component.change);
     },
-    handleChange: function (event) {
+    change: function (event) {
+        const component = Biovision.components.componentParameters;
         const element = event.target;
-        const button = element.parentNode.querySelector('button');
-
-        button.disabled = false;
-    },
-    keyUp: function (event) {
-        const component = Biovision.components.componentEditor;
-        const element = event.target;
-        const button = element.parentNode.querySelector('button');
-
-        if (component.values[element.getAttribute('id')] !== element.value) {
-            button.disabled = false;
-        }
-    },
-    /**
-     *
-     * @param {MouseEvent} event
-     * @type {Function}
-     */
-    handleClick: function (event) {
-        const component = Biovision.components.componentEditor;
-        /**
-         *
-         * @type {HTMLButtonElement}
-         */
-        const button = event.target;
-        const li = button.closest('li');
-        const input = li.querySelector('input');
         const data = {
             "key": {
-                "slug": button.getAttribute('data-slug'),
-                "value": input.value
+                "slug": element.name,
+                "value": element.value
             }
         };
-
-        const request = Biovision.jsonAjaxRequest('put', component.url, function () {
-            component.values[input.getAttribute('id')] = input.value;
+        const request = Biovision.jsonAjaxRequest("patch", component.url, function () {
+            element.disabled = false;
+            element.classList.add("updated");
+        }, function () {
+            element.disabled = false;
+            element.classList.add("failed");
         });
 
-        button.disabled = true;
+        element.classList.remove("updated", "failed");
+        element.disabled = true;
         request.send(JSON.stringify(data));
     },
     add: function (data) {
-        if (this.initialized) {
-            const li = document.createElement('li');
-            const name = document.createElement('div');
-            const value = document.createElement('div');
-            const input = document.createElement('input');
-
-            name.classList.add('name');
-            name.innerHTML = "<label>" + data["slug"] + "</label>\n<span>(" + data["name"] + ")</span>";
-
-            value.classList.add('value');
-            input.value = data["value"];
-            value.appendChild(input);
-
-            li.appendChild(name);
-            li.appendChild(value);
-
-            if (data["description"]) {
-                const desc = document.createElement('div');
-                desc.classList.add('description');
-                desc.innerHTML = data["description"];
-
-                li.appendChild(desc);
-            }
-
-            this.list.appendChild(li);
-        } else {
-            console.log('componentEditor is not initialized');
-        }
+        const div = document.createElement("div");
+        const dt = document.createElement("dt");
+        const label = document.createElement("label");
+        const elementId = "parameter-" + data["slug"];
+        label.setAttribute("for", elementId);
+        label.innerHTML = data["slug"];
+        dt.append(label);
+        const dd = document.createElement("dd");
+        const input = document.createElement("input");
+        input.setAttribute("id", elementId);
+        input.setAttribute("name", data["slug"]);
+        input.value = data["value"];
+        dd.append(input);
+        this.apply(input);
+        div.append(dt);
+        div.append(dd);
+        this.list.append(div);
     }
 };
 
-Biovision.components.newParameterForm = {
+Biovision.components.newComponentParameter = {
     initialized: false,
-    element: undefined,
+    container: undefined,
+    url: undefined,
+    button: undefined,
     init: function () {
-        this.element = document.getElementById('new-biovision-parameter-form');
-        if (this.element) {
+        this.container = document.getElementById("biovision-component-new-parameter");
+        if (this.container) {
             const component = this;
-
-            this.element.addEventListener('submit', component.handler);
+            this.url = this.container.getAttribute("data-url");
+            this.button = this.container.querySelector("button");
+            this.button.addEventListener("click", component.click);
             this.initialized = true;
         }
     },
-    handler: function (event) {
-        event.preventDefault();
-
-        const form = event.target;
-        const url = form.getAttribute('action');
+    click: function () {
+        const component = Biovision.components.newComponentParameter;
         const data = {"key": {}};
-        form.querySelectorAll('input[data-field]').forEach(function (input) {
-            data["key"][input.getAttribute('data-field')] = input.value;
+        let dataPresent = true;
+        component.container.querySelectorAll("input").forEach(function (input) {
+            dataPresent &= input.value.length > 0;
+            data.key[input.name] = input.value;
         });
 
-        const request = Biovision.jsonAjaxRequest('put', url, function () {
-            Biovision.components.newParameterForm.clear();
-            Biovision.components.componentEditor.add(data["key"]);
-        });
-
-        request.send(JSON.stringify(data));
-    },
-    clear: function () {
-        const component = Biovision.components.newParameterForm;
+        if (dataPresent) {
+            const request = Biovision.jsonAjaxRequest("patch", component.url, function () {
+                component.container.querySelectorAll("input").forEach(function (input) {
+                    input.value = '';
+                });
+                Biovision.components.componentParameters.add(data["key"]);
+                component.button.disabled = false;
+            }, function () {
+                component.button.disabled = false;
+            });
 
-        component.element.querySelectorAll('input').forEach(function (input) {
-            input.value = '';
-        });
+            component.button.disabled = true;
+            request.send(JSON.stringify(data));
+        }
     }
 };
 

data/app/assets/stylesheets/biovision/base/admin/components.scss

@@ -1,141 +1,131 @@
 $text-color-secondary: #777 !default;
+$block-shadow: .2rem .2rem .4rem .2rem rgba(0, 0, 0, .125) !default;
+$row-background-even: hsl(0, 0%, 95%) !default;
+$row-background-odd: hsl(0, 0%, 98%) !default;
 
 #biovision-component-parameters {
   margin: var(--spacer-s) 0;
   padding: 0;
 
-  li {
-    list-style: none;
-    margin: 0 0 var(--spacer-m);
-  }
-
   label {
     font-size: var(--font-size-increased);
     font-weight: 400;
-
-    + span {
-      color: $text-color-secondary;
-    }
   }
 
-  .name {
-    input {
-      width: 100%;
-    }
+  input {
+    border: .1rem solid #aaa;
+    margin: 0;
+    padding: var(--spacer-xxs);
+    transition: .125s;
   }
 
-  .value {
-    align-items: center;
-    display: flex;
-    margin: var(--spacer-xxs) 0;
-
-    input {
-      flex: 1;
-    }
-
-    button {
-      --shadow-color: rgba(0, 0, 0, .25);
-
-      background: no-repeat center / contain;
-      border: none;
-      border-radius: .2rem;
-      box-shadow: 0 0 .4rem var(--shadow-color);
-      cursor: pointer;
-      display: inline-block;
-      flex: none;
-      height: 2.4rem;
-      margin: 0 var(--spacer-xxs);
-      transition: .25s;
-      width: 2.4rem;
-
-      &:active,
-      &:hover {
-        --shadow-color: rgba(0, 0, 0, .75);
-      }
-
-      &:disabled {
-        cursor: default;
-        filter: grayscale(1);
-      }
-    }
-
-    .apply {
-      background-color: rgba(97, 228, 64, .125);
-      background-image: image_url('biovision/base/icons/apply.svg');
-    }
+  :disabled {
+    background-color: transparent;
+    border-color: transparent;
+  }
 
-    .delete {
-      background-color: rgba(228, 97, 64, .125);
-      background-image: image_url('biovision/base/icons/destroy.svg');
-    }
+  .updated {
+    background-color: rgba(0, 127, 0, .125);
+    border-color: rgb(0, 127, 0);
   }
 
-  .description {
-    font-size: var(--font-size-decreased);
-    margin: var(--spacer-xxs) 0 0;
+  .failed {
+    background-color: rgba(127, 0, 0, .125);
+    border-color: rgb(127, 0, 0);
   }
 }
 
-.biovision-components {
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
+.biovision-components-list {
   margin: 0;
   padding: 0;
 
   li {
     list-style: none;
-    margin: var(--spacer-xs);
-    padding: 0;
+    margin: var(--spacer-xs) 0;
   }
 
   a {
-    --shadow-color: rgba(0, 0, 0, .25);
+    --image-size: calc(var(--font-size-normal) + var(--spacer-xs));
 
-    background: no-repeat center top var(--spacer-s);
-    border-radius: .4rem;
-    box-shadow: 0 0 .4rem var(--shadow-color);
+    background: no-repeat center left / var(--image-size) var(--image-size);
     display: inline-block;
-    padding: calc(var(--spacer-m) + 16rem) 0 var(--spacer-s);
-    text-align: center;
-    width: calc(var(--spacer-s) + 16rem);
-
-    &:active,
-    &:focus,
-    &:hover {
-      --shadow-color: rgba(0, 0, 0, .75);
+    padding: var(--spacer-xxs) 0 var(--spacer-xxs) calc(var(--image-size) + var(--spacer-xxs));
+  }
+
+  .contact {
+    background-image: image_url('biovision/base/icons/components/contact.svg');
+  }
+
+  .registration {
+    background-image: image_url('biovision/base/icons/components/registration.svg');
+  }
+
+  .users {
+    background-image: image_url('biovision/base/icons/components/users.svg');
+  }
+
+  .content {
+    background-image: image_url('biovision/base/icons/components/content.svg');
+  }
+}
+
+.biovision-components-index {
+  h2 {
+    background: no-repeat center left / 2.4rem 2.4rem;
+    padding-left: 3rem;
+  }
+
+  .contact {
+    h2 {
+      background-image: image_url('biovision/base/icons/components/contact.svg');
     }
   }
 
-  .settings-general {
-    a {
-      background-image: image_url('biovision/base/icons/settings.svg');
+  .registration {
+    h2 {
+      background-image: image_url('biovision/base/icons/components/registration.svg');
     }
   }
-}
 
-.biovision-components-list {
-  margin: 0;
-  padding: 0;
+  .users {
+    h2 {
+      background-image: image_url('biovision/base/icons/components/users.svg');
+    }
+  }
 
-  li {
-    list-style: none;
-    margin: var(--spacer-xs) 0;
+  .content {
+    h2 {
+      background-image: image_url('biovision/base/icons/components/content.svg');
+    }
   }
+}
 
-  a {
-    --image-size: calc(var(--font-size-normal) + var(--spacer-xs));
+.biovision-component-nav {
+  margin: var(--spacer-s);
 
-    background: no-repeat center left / var(--image-size) var(--image-size);
+  .settings {
+    background: image_url('biovision/base/icons/settings.svg') no-repeat center left / 2rem 2rem;
     display: inline-block;
-    padding: var(--spacer-xxs) 0 var(--spacer-xxs) calc(var(--image-size) + var(--spacer-xxs));
+    margin: 0 0 var(--spacer-xs);
+    padding-left: 2.4rem;
   }
 
-  .contact {
-    background-image: image_url('biovision/base/icons/components/contact.svg');
+  ul {
+    box-shadow: $block-shadow;
+    margin: var(--spacer-xxs);
+    max-width: 64rem;
+    padding: 0;
   }
 
-  .registration {
-    background-image: image_url('biovision/base/icons/components/registration.svg');
+  li {
+    background: $row-background-odd;
+    list-style: none;
+    margin: 0;
+    padding: var(--spacer-xs);
+    position: relative;
+
+    &:nth-last-of-type(even) {
+      background: $row-background-even;
+    }
   }
 }