Satus update

modules/button/style.css → components/button/button.css

@@ -1,14 +1,6 @@
-/*------------------------------------------------------------------------------
->>> "BUTTON" COMPONENT:
---------------------------------------------------------------------------------
-1.0 Global
-2.0 Main
-3.0 Dialog
-------------------------------------------------------------------------------*/
-
-/*------------------------------------------------------------------------------
-1.0 Global
-------------------------------------------------------------------------------*/
+/*-----------------------------------------------------------------------------
+>>> «BUTTON» COMPONENT
+-----------------------------------------------------------------------------*/
 
 .satus-button
 {
@@ -22,6 +14,7 @@
     min-width: 48px;
     height: 48px;
     min-height: 48px;
+    padding: 0 16px;
 
     cursor: pointer;
 
@@ -35,7 +28,7 @@
     width: 24px;
     height: 24px;
 
-    fill: var(--color-1);
+    fill: var(--text-1);
 }
 
 .satus-button::before
@@ -53,7 +46,7 @@
     pointer-events: none;
 
     opacity: 0;
-    background: var(--hover-background);
+    background: var(--background-hover-2);
 }
 
 .satus-button:focus::before,
@@ -67,6 +60,7 @@
     max-width: 48px;
     min-height: auto;
     max-height: 100%;
+    padding: 0;
 
     justify-content: center;
 }
@@ -78,34 +72,3 @@
 
     border-radius: 50%;
 }
-
-.satus-button:not(.satus-button_icon)
-{
-    padding: 0 16px;
-}
-
-.satus-button_full-width
-{
-    width: 100%;
-}
-
-
-/*------------------------------------------------------------------------------
-2.0 Modifiers
-------------------------------------------------------------------------------*/
-
-.satus-section--controls .satus-button
-{
-    font-weight: 500;
-
-    overflow: hidden;
-
-    height: 40px;
-    min-height: 40px;
-    margin-right: 8px;
-
-    text-transform: uppercase;
-
-    color: #f96754;
-    border-radius: 4px;
-}

modules/button/index.js → components/button/button.js

@@ -1,10 +1,12 @@
+/*-----------------------------------------------------------------------------
+>>> «BUTTON» COMPONENT
+-----------------------------------------------------------------------------*/
+
 Satus.button = function(object) {
     var options = object.options || {},
         component = document.createElement('div'),
         component_label = document.createElement('span');
 
-    object.tabindex = true;
-
     if (options.full_width === true) {
         component.classList.add('satus-button_full-width');
     }
@@ -22,7 +24,7 @@ Satus.button = function(object) {
     }
 
     component_label.classList.add('label');
-    component_label.innerText = /*this.get('locale/' + object.label) ||*/ object.label || '';
+    component_label.innerText = this.get('locale/' + object.label) || object.label || '';
     component.appendChild(component_label);
 
     return component;

modules/dialog/style.css → components/dialog/dialog.css

@@ -42,7 +42,7 @@
     width: 100%;
     height: 100%;
 
-    background: rgba(0,0,0,.4);
+    background: rgba(0,0,0,.5);
 }
 
 .satus-dialog__scrim_unvisible
@@ -67,9 +67,9 @@
     animation: zoomIn 150ms linear forwards;
     animation-delay: 20ms;
 
-    color: var(--color-1);
+    color: var(--text-3);
     border-radius: 4px;
-    background: var(--background-1);
+    background: var(--background-3);
     box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
 
     justify-content: center;
@@ -89,3 +89,46 @@
         max-width: calc(100% - 16px);
     }
 }
+
+@keyframes fadeIn
+{
+    from
+    {
+        opacity: 0;
+    }
+    to
+    {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeOut
+{
+    from
+    {
+        opacity: 1;
+    }
+    to
+    {
+        opacity: 0;
+    }
+}
+
+@keyframes zoomIn
+{
+    from
+    {
+        transform: scale(.75);
+    }
+    to
+    {
+        transform: scale(1);
+    }
+}
+
+
+
+.satus-dialog__surface > .satus-button
+{
+    width: 100%;
+}

components/folder/folder.css

@@ -0,0 +1,28 @@
+/*-----------------------------------------------------------------------------
+>>> «FOLDER» COMPONENT
+-----------------------------------------------------------------------------*/
+
+.satus-folder
+{
+    display: flex;
+
+    cursor: pointer;
+
+    align-items: center;
+}
+
+.satus-folder:hover
+{
+    background: var(--background-hover-1);
+}
+
+.satus-folder > svg
+{
+    width: 22px;
+    height: 22px;
+    margin-right: 10px;
+
+    opacity: .75;
+
+    fill: var(--text-1);
+}

modules/folder/index.js → components/folder/folder.js

@@ -1,5 +1,16 @@
+/*-----------------------------------------------------------------------------
+>>> «FOLDER» COMPONENT
+-----------------------------------------------------------------------------*/
+
 Satus.folder = function(object, name) {
-    let element = document.createElement('div');
+    let element = document.createElement('div'),
+        label = document.createElement('span');
+
+    if (typeof object.icon === 'string') {
+        element.innerHTML = object.icon;
+    }
+
+    label.innerText = this.get('locale/' + object.label) || object.label || this.get('locale/' + name) || name;
 
     function create() {
         let container = document.createElement('div');
@@ -10,7 +21,7 @@ Satus.folder = function(object, name) {
             let self = this,
                 container = create(),
                 object = Menu,
-                path = this.path.split('/').filter(function(value) {
+                path = document.querySelector('.satus').dataset.path.split('/').filter(function(value) {
                     return value != '';
                 });
 
@@ -21,9 +32,7 @@ Satus.folder = function(object, name) {
 
             path.pop();
 
-            container.path = path.join('/');
-
-            document.querySelector('.satus').dataset.path = path;
+            document.querySelector('.satus').dataset.path = path.join('/');
 
             for (let i = 0, l = path.length; i < l; i++) {
                 object = object[path[i]];
@@ -67,8 +76,7 @@ Satus.folder = function(object, name) {
 
         element.parentNode.dataset.status = 'pre-opening';
         container.dataset.status = 'pre-opening';
-        container.path = (container.path || 'main/') + name;
-        document.querySelector('.satus').dataset.path = container.path;
+        document.querySelector('.satus').dataset.path = (document.querySelector('.satus').dataset.path || 'main') + '/' + name;
 
         Satus.render(container, object);
 
@@ -93,5 +101,7 @@ Satus.folder = function(object, name) {
         });
     });
 
+    element.appendChild(label);
+
     return element;
 };

components/header/header.css

@@ -0,0 +1,20 @@
+/*-----------------------------------------------------------------------------
+>>> «HEADER» COMPONENT
+-----------------------------------------------------------------------------*/
+
+.satus-header
+{
+    position: relative;
+    z-index: 1;
+
+    display: flex;
+
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 64px;
+    padding: 0 8px;
+
+    color: var(--text-2);
+    background: var(--background-2);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
+}

components/header/header.js

@@ -0,0 +1,11 @@
+/*-----------------------------------------------------------------------------
+>>> «HEADER» COMPONENT
+-----------------------------------------------------------------------------*/
+
+Satus.header = function(object) {
+    let element = document.createElement('header');
+
+    this.render(element, object);
+
+    return element;
+};

modules/main/style.css → components/main/main.css

@@ -1,3 +1,7 @@
+/*-----------------------------------------------------------------------------
+>>> «MAIN» COMPONENT
+-----------------------------------------------------------------------------*/
+
 .satus-main
 {
     font-size: 14px;
@@ -8,10 +12,10 @@
     overflow: hidden;
 
     width: 100%;
-    height: calc(100vh - 56px);
+    height: calc(100vh - 64px);
 
-    color: var(--text-1, #727272);
-    background: var(--background-1, #fefefe);
+    color: var(--text-1);
+    background: var(--background-1);
 }
 
 .satus-main__container
@@ -162,3 +166,10 @@
     min-height: 48px;
     padding: 0 16px;
 }
+
+
+.satus-main__container > *
+{
+    min-height: 48px;
+    padding: 0 16px;
+}

modules/main/index.js → components/main/main.js

@@ -1,3 +1,7 @@
+/*-----------------------------------------------------------------------------
+>>> «MAIN» COMPONENT
+-----------------------------------------------------------------------------*/
+
 Satus.main = function(object) {
     let element = document.createElement('main'),
         container = document.createElement('div');

components/section/section.css

@@ -0,0 +1,29 @@
+/*-----------------------------------------------------------------------------
+>>> «SECTION» COMPONENT
+-----------------------------------------------------------------------------*/
+
+.satus-section
+{
+    display: flex;
+
+    flex: 1;
+    align-items: center;
+}
+
+.satus-section--align-start
+{
+    justify-content: flex-start;
+}
+
+
+.satus-section--align-end
+{
+    justify-content: flex-end;
+}
+
+.satus-section__label
+{
+    width: 100%;
+
+    opacity: .5;
+}

components/section/section.js

@@ -0,0 +1,20 @@
+/*-----------------------------------------------------------------------------
+>>> «SECTION» COMPONENT
+-----------------------------------------------------------------------------*/
+
+Satus.section = function(object) {
+    let component = document.createElement('section'),
+        component_label = document.createElement('span'),
+        label = this.get('locale/' + object.label) || object.label;
+
+    if (label) {
+        component_label.classList.add('satus-section__label');
+        component_label.innerText = label;
+
+        component.appendChild(component_label);
+    }
+
+    this.render(component, object);
+
+    return component;
+};