feat: Introduce Dialog as successor for Modal - Fiori 3 refactor (#687)

SAP · Feb 21, 2020 · 704de9b · 704de9b
1 parent 35b42c0
commit 704de9b
Show file tree

Hide file tree

Showing 43 changed files with 856 additions and 514 deletions.
diff --git a/docs/_data/components.yml b/docs/_data/components.yml
@@ -12,6 +12,9 @@
     - title: Button
       meta: button
 
+    - title: Dialog
+      meta: dialog
+
     - title: Forms
       meta: form
 
@@ -45,9 +48,6 @@
     - title: Message Strip
       meta: message-strip
 
-    - title: Modal
-      meta: modal
-
     - title: Notification
       meta: notification
 

diff --git a/docs/_data/sidebars/left-navigation-sidebar.yml b/docs/_data/sidebars/left-navigation-sidebar.yml
@@ -124,6 +124,10 @@ entries:
       url: /components/calendar.html
       output: web
 
+    - title: Dialog
+      url: /components/dialog.html
+      output: web
+
     - title: Forms
       url: /components/form.html
       output: web
@@ -176,10 +180,6 @@ entries:
       url: /components/message-strip.html
       output: web
 
-    - title: Modal
-      url: /components/modal.html
-      output: web
-
     - title: Notification
       url: /components/notification.html
       output: web
@@ -211,7 +211,7 @@ entries:
     - title: Status Indicators
       url: /components/status-indicators.html
       output: web
-    
+
     - title: Switch
       url: /components/switch.html
       output: web

diff --git a/docs/_includes/demo-page-components/modal-app-overlay.html b/docs/_includes/demo-page-components/modal-app-overlay.html
diff --git a/docs/_sass/_docs-component-list.scss b/docs/_sass/_docs-component-list.scss
@@ -134,7 +134,7 @@ $grid-transition-delay: 100ms;
             margin-top: 50px;
         }
 
-        &__modal {
+        &__dialog {
             width: 230px;
             margin-top: 0;
         }

diff --git a/docs/_sass/_docs-display-component.scss b/docs/_sass/_docs-display-component.scss
@@ -87,6 +87,26 @@
         text-decoration: none;
     }
 
+    .fd-dialog-docs-static {
+        &.fd-dialog,
+        .fd-dialog {
+            position: static;
+            background-color: transparent;
+        }
+
+        &.fd-dialog__content,
+        .fd-dialog__content{
+            position: static;
+            transform: translate(0%, 0%);
+            width: 30rem;
+            margin: auto;
+
+            &:not(:last-child) {
+                margin-bottom: 2rem;
+            }
+        }
+    }
+
     &__app {
         height: 500px;
         color: fd-color(text, 5);

diff --git a/docs/images/component-visual/modal.png → docs/images/component-visual/dialog.png b/docs/images/component-visual/modal.png → docs/images/component-visual/dialog.png
diff --git a/docs/js/customscripts.js b/docs/js/customscripts.js
@@ -19,6 +19,9 @@ $(document).ready(function () {
 });
 
 $(document).ready(function () {
+    //dialog
+    draggableDialog();
+
     //dropdown
     var els = document.querySelectorAll("[aria-controls]");
     for (var i = 0; i < els.length; i++) {
@@ -83,6 +86,7 @@ $(document).ready(function () {
                     group.classList.remove('is-hidden');
                 }
             }
+
             var isPressed;
             //handle the primary trigger
             if (isTree || isTreeItem) {
@@ -116,6 +120,7 @@ $(document).ready(function () {
         }
         return block;
     }
+
     //get all tablists
     var tablists = document.querySelectorAll('[role="tablist"]');
     //handle each tablist
@@ -209,7 +214,7 @@ $(document).ready(function () {
 
     const triStateCheckboxI8 = document.getElementById('Ai4ez6191');
     if (triStateCheckboxI8) {
-      triStateCheckboxI8.indeterminate = true;
+        triStateCheckboxI8.indeterminate = true;
     }
 
     // display responsive component controls
@@ -251,7 +256,7 @@ function stepInputValue(inputId, stepDirection) {
     let inputRef = document.getElementById(inputId);
 
     if (inputRef) {
-        if(stepDirection === "up") {
+        if (stepDirection === "up") {
             ++inputRef.value;
         } else if (stepDirection === "down") {
             --inputRef.value;
@@ -261,3 +266,28 @@ function stepInputValue(inputId, stepDirection) {
     }
 }
 
+function toggleDialog(dialogId, show) {
+    let dialog = document.getElementById(dialogId);
+    if (show) {
+        $(dialog).addClass("fd-dialog--active")
+    } else {
+        $(dialog).removeClass("fd-dialog--active")
+    }
+}
+
+
+function draggableDialog() {
+    let draggableDialogs = document.getElementsByClassName('fd-dialog__content--draggable-grab');
+
+    for (let i = 0; i < draggableDialogs.length; i++) {
+        let dialogHeader = draggableDialogs[i].getElementsByClassName('fd-dialog__header')[0];
+        if (dialogHeader) {
+            dialogHeader.onmousedown = function () {
+                $(draggableDialogs[i]).addClass('fd-dialog__content--draggable-grabbing');
+            };
+            dialogHeader.onmouseup = function () {
+                $(draggableDialogs[i]).removeClass('fd-dialog__content--draggable-grabbing');
+            };
+        }
+    }
+}
diff --git a/docs/pages/components/button.md b/docs/pages/components/button.md
@@ -10,7 +10,7 @@ folder: components
 
 Buttons allow users to perform actions.
 {: .docs-intro}
-The priority of buttons within a page should be considered. For instance, only use the main button once within a page or modal.
+The priority of buttons within a page should be considered. For instance, only use the main button once within a page or dialog.
 Color is also important. For instance, the most important button has a blue background where as a red button should only be used if the action it performs is potentially destructive.
 
 <br>