Merge branch 'desenv' into main

rucula-js · May 30, 2024 · 03196e8 · 03196e8
2 parents db8ba83 + ac17ce1
commit 03196e8
Show file tree

Hide file tree

Showing 11 changed files with 221 additions and 45 deletions.
diff --git a/assets/rucula-70x70.png b/assets/rucula-70x70.png
diff --git a/dist/const.d.ts b/dist/const.d.ts
@@ -50,6 +50,7 @@ export declare const constIdBaseWindow: {
     OLLI_ENVIROMENT: string;
     FORM_RUCULA_JS: string;
     BUTTONS_MENU_VERTICAL: string;
+    BUTTONS_MENU_VERTICAL_MOBILE: string;
     BUTTONS_MENU_VERTICAL_LIST: string;
     TITLE: string;
 };

diff --git a/dist/rucula.js b/dist/rucula.js
@@ -49,6 +49,7 @@ const constIdBaseWindow = {
     OLLI_ENVIROMENT: "r-enviroment-list",
     FORM_RUCULA_JS: "form-rucula-js",
     BUTTONS_MENU_VERTICAL: "r-a-menu-vertical",
+    BUTTONS_MENU_VERTICAL_MOBILE: "r-a-menu-vertical-mobile",
     BUTTONS_MENU_VERTICAL_LIST: "r-a-menu-vertical-list",
     TITLE: "r-window-title"
 };
@@ -756,7 +757,7 @@ let windowBaseDOM = (() => {
                 <h3 id="r-f-home-title"></h3>
             </div>
         </div>
-        <div autocomplete="off" class="r-f container-r-f r-f-hidden js-open-close-container">
+        <div autocomplete="off" class="r-f container-r-f r-display-none js-open-close-container">
            
         <div class="r-facede-action top">
             <div class="r-window-name r-facede-action top">
@@ -791,15 +792,20 @@ let windowBaseDOM = (() => {
                     <button id="r-a-save" class="r-a-b "><i class="bi bi-box-arrow-in-down"></i></button>
                     <button id="r-a-alter" class="r-a-b"><i class="bi bi-pen"></i></button>
                     <button id="r-a-delete" class="r-a-b"><i class="bi bi-trash"></i></button>    
-                    <button id=${constIdBaseWindow.BUTTONS_MENU_VERTICAL} class="r-a-b"><i class="bi bi-three-dots-vertical"></i></button>
-                    <ol id=${constIdBaseWindow.BUTTONS_MENU_VERTICAL_LIST} class="r-a-menu-vertical-list list-vertical-buttons list-vertical-buttons-pp-rigth r-display-none"> 
-                    </ol>    
+                    <button id=${constIdBaseWindow.BUTTONS_MENU_VERTICAL} class="r-a-b"><i class="bi bi-arrows"></i></button>    
                 </div>
                 </div>
             </div>
 
-            <form class="r-f-items" id="${constIdBaseWindow.FORM_RUCULA_JS}" autocomplete="off">
-            </form>
+            <div class="r-w-body">
+                <form class="r-f-items" id="${constIdBaseWindow.FORM_RUCULA_JS}" autocomplete="off">
+                </form>
+                <div class="r-vertical-actions">
+                    <ol id=${constIdBaseWindow.BUTTONS_MENU_VERTICAL_LIST} class=""> 
+                    </ol>
+                    <button id=${constIdBaseWindow.BUTTONS_MENU_VERTICAL_MOBILE} class="r-a-b actions-mobile"><i class="bi bi-arrows"></i></button>    
+                </div>
+            </div>
             <div class="r-facede-action bottom">
             </div>
             <div class="r-box-show" id="r-box-show"> 
@@ -820,7 +826,7 @@ let windowBaseDOM = (() => {
     function openCloseContainer() {
         let itemContainer = document.querySelectorAll(".js-open-close-container");
         itemContainer.forEach(item => {
-            item.classList.toggle("r-f-hidden");
+            item.classList.toggle("r-display-none");
         });
     }
     function closeLeftGrid(grid) {
@@ -930,7 +936,6 @@ class ElementButton extends ElementBase {
         let icon = createIcon(button);
         let span = document.createElement('span');
         span.textContent = button.text ?? "";
-        span.style.marginLeft = "5px";
         this.element.appendChild(icon);
         this.element.appendChild(span);
         this.addColor(button.color);
@@ -2053,10 +2058,14 @@ function eventButton(pathController, buttons) {
 }
 function openCloseRightListButtons() {
     const openClose = document.getElementById("r-a-menu-vertical");
-    const listRight = document.getElementById("r-a-menu-vertical-list");
+    const listRight = document.querySelector(".r-vertical-actions");
+    const openClosemobile = document.getElementById(constIdBaseWindow.BUTTONS_MENU_VERTICAL_MOBILE);
     openClose?.addEventListener("click", () => {
         listRight?.classList.toggle("r-display-none");
     });
+    openClosemobile?.addEventListener("click", () => {
+        listRight?.classList.toggle("r-display-none");
+    });
 }
 
 let defaultValues = (() => {
@@ -2210,10 +2219,8 @@ let loaderManagment = (() => {
         },
         disable: function () {
             let loader = document.querySelector('.js-r-loader');
-            setTimeout(() => {
-                loaderBkp.appendChild(loader);
-                boxShow?.classList.remove('r-box-show-center');
-            }, 1000);
+            loaderBkp.appendChild(loader);
+            boxShow?.classList.remove('r-box-show-center');
         }
     };
 })();

diff --git a/dist/style/style.css b/dist/style/style.css
@@ -83,11 +83,6 @@
     align-items: center;
 }
 
-/* Duplicado */
-.r-f-hidden{
-    display: none;
-}
-
 .r-display-none{
     display: none;
 }
@@ -313,18 +308,34 @@ input.r-i-focus-dependency {
     height: var(--heigth-r-facede-action);
 }
 
+
+.r-w-body {
+    display: flex;
+    height: calc(100% - var(--heigth-r-facede-action));
+}
+
+form.r-f-items,
+.r-vertical-actions {
+    max-height: 100%;
+}
 form.r-f-items{
     display: grid;
+    width: 100%;
     grid-column-gap: 10px;
     grid-row-gap: 10px;
-    max-height: calc(100% - var(--heigth-r-facede-action));
     padding-right: 5px;
     padding-left: 5px;
     padding-top: 10px;
     padding-bottom: 10px;
     overflow: auto;
 }
-
+.r-vertical-actions{
+    width: 200px;
+    background-color: var(--bgc-frames);
+    margin-top: 10px;
+    margin-bottom: 10px;
+    overflow-y: auto;
+}
 .r-facede-action {
     background-color: var(--bgc-r-facede-action)
 }
@@ -344,6 +355,8 @@ form.r-f-items{
     color: var(--color-write);
     z-index:1;
     width: 100%;
+    padding-left: 10px ;
+    padding-right: 10px;
 }
 
 .r-read-new,.r-act-opt {
@@ -440,11 +453,15 @@ form.r-f-items{
     background-color: inherit;
 }
 
+.r-vertical-actions ol,
+.list-vertical-buttons {
+    list-style: none;
+    padding: 0px;
+}
+
 .list-vertical-buttons {
     position: absolute;
     top:40px;
-    padding: 0px;
-    list-style: none;
     background-color: var(--color-black);
     min-width: 200px;
     margin: 0;
@@ -482,6 +499,32 @@ form.r-f-items{
     border-radius: 5px 5px  5px  5px 
 }
 
+.r-vertical-actions ol {
+    margin: 0;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+.r-vertical-actions ol li button,
+.r-vertical-actions ol li a {
+    font-size: 1rem;
+    padding: 5px 5px 7px 5px;
+    margin: 0;
+    cursor: pointer;
+    border: none;
+    background-color: var(--bgc-frames);
+    color: var(--color-default);
+    width: 100%;
+    text-align: left;
+}
+
+.r-vertical-actions ol li a {
+    text-decoration: none;
+}
+
+.r-a-b.actions-mobile{
+    display: none;
+}
 .r-text-nowrap {
     text-wrap: nowrap;
 }
@@ -728,10 +771,42 @@ input:-internal-autofill-selected {
         text-align: center;
         background-color: var(--bgc-r-facede-action);
         color: var(--color-icons-action);
+
     }
 
     .r-message{
         max-width: calc(100% - 30px) ;
     }
+
+    .r-vertical-actions {
+        position: absolute;
+        margin: 0;
+        padding-bottom: 10px;
+        padding-left: 10px;
+        padding-right: 10px;
+        height: calc(100% - var(--heigth-r-facede-action));
+        width: 100%;
+        right: 0;
+        left: 0;
+        z-index:1;
+        background-color: var(--bgc-r-w);
+
+    }
+    .r-a-b.actions-mobile{
+        display: block;
+        position: absolute;
+        bottom: 15px;
+        right: 10px;
+    }
+    .r-vertical-actions ol {        
+        margin-top: 10px;
+        background-color: var(--bgc-frames);
+        height: inherit;
+    }
+    .r-vertical-actions ol li button,
+    .r-vertical-actions ol li {
+        text-align: center;
+    }
+
 
 }
diff --git a/docs/docs/index.md b/docs/docs/index.md
@@ -132,6 +132,11 @@ npm i @reginaldo-marinho/rucula-js` ou `npm install @reginaldo-marinho/rucula-js
     - [Ao Vivo](https://rucula-js.github.io/exemples/via-cep.html)
 
 
+0. Ordem de Serviço
+    - [Código](https://github.com/rucula-js/rucula-js/blob/main/docs/docs/exemples/ordem-servico.html)
+    - [Ao Vivo](https://rucula-js.github.io/exemples/ordem-servico.html)
+
+
 ##### Contribuidores
 
 <br>

diff --git a/exemples/ordemServicoApiControl.json b/exemples/ordemServicoApiControl.json
@@ -233,7 +233,7 @@
       "endPoint": "delete-os"
     },
     {
-      "text": "Finalizar 💵",
+      "text": "Finalizar",
       "type": "button",
       "target": "finalll",
       "endPoint": "delete-os",
@@ -243,9 +243,13 @@
       "body":"."
     },
     {
-      "text": "Validar  🎲",
+      "text": "Validar",
       "type": "button",
       "target": "finalizar-compra",
       "endPoint": "delete-os"
+    },
+    {
+      "text": "Repositório",
+      "type": "link"
     }
   ]}