RUC-UP versão 0.0.50

rucula-js · May 14, 2024 · 8857441 · 8857441
1 parent d545c1e
commit 8857441
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 11 deletions.
diff --git a/dist/const.d.ts b/dist/const.d.ts
@@ -41,6 +41,7 @@ export declare const constIdBaseWindow: {
     NEW: string;
     RELOAD: string;
     ERASE_WINDOW: string;
+    ALTER_THEME: string;
     MAXIMIZE_WINDOW: string;
     ACTIONS_WINDOW: string;
     GLOBALIZATION: string;

diff --git a/dist/rucula.js b/dist/rucula.js
@@ -40,6 +40,7 @@ const constIdBaseWindow = {
     NEW: "r-a-new",
     RELOAD: "r-a-reload",
     ERASE_WINDOW: "erase-window",
+    ALTER_THEME: "alter-theme",
     MAXIMIZE_WINDOW: "maximize-window",
     ACTIONS_WINDOW: "r-actiond-window",
     GLOBALIZATION: "r-globalization",
@@ -696,6 +697,7 @@ let windowBaseDOM = (() => {
         prepareEventsButtonsCrud();
         maximizeWindow();
         eraseWindow();
+        alterTheme();
         openActionswindow();
         function calculateHeightRuculaWindow() {
             let offsetTop = Number(ruculaWindow.offsetTop);
@@ -750,6 +752,7 @@ let windowBaseDOM = (() => {
                             <button id="${constIdBaseWindow.MAXIMIZE_WINDOW}" class="r-a-b"><i class="bi bi-arrows"></i></button>
                             <button id="${constIdBaseWindow.RELOAD}" class="r-a-b "><i class="bi bi-arrow-repeat"></i></button>
                             <button id="${constIdBaseWindow.ERASE_WINDOW}" class="r-a-b "><i class="bi bi-eraser"></i></button>
+                            <button id="${constIdBaseWindow.ALTER_THEME}" class="r-a-b "><i class="bi bi-circle-half"></i></button>
                         </div>
                         <div class="actions-view">
                             <button id="${constIdBaseWindow.GLOBALIZATION}" class="r-a-b">
@@ -765,9 +768,6 @@ let windowBaseDOM = (() => {
                         </div>
                     </div>
                 </div>
-                    <div class="r-window-name r-facede-action">
-                        <h3 class="${constIdBaseWindow.TITLE}"></h3>
-                    </div>
                 <div class="r-head r-read-edit">
                     <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>
@@ -842,6 +842,13 @@ let windowBaseDOM = (() => {
             actions?.nextElementSibling?.classList.toggle('r-actions-window');
         });
     }
+    function alterTheme() {
+        let actions = document.getElementById(constIdBaseWindow.ALTER_THEME);
+        actions?.addEventListener('click', (e) => {
+            let rw = document.querySelector('.r-w');
+            rw?.classList.toggle('dark-theme');
+        });
+    }
     return {
         createWindowBase: (id) => {
             createWindowBase(id);

diff --git a/dist/style/style.css b/dist/style/style.css
@@ -6,9 +6,15 @@
     --color-grey:#c7c7c7;
     --color-grey-weak:#f2f2f2;
     --color-black:#211e1e;
+    --bgc-r-facede-action: #fafafa;
+    --color-icons-action: #211e1e;
     --heigth-r-facede-action: 50px;
 }
 
+.r-w.dark-theme{
+    --bgc-r-facede-action: #21282d;
+    --color-icons-action: #fafafa;
+}
 
 *{
     box-sizing:border-box;
@@ -105,7 +111,7 @@ button.r-actions-window{
     z-index: 6;
     margin-top: 0;
     margin-bottom: 0;
-    background-color: var(--color-black);
+    background-color: var(--bgc-r-facede-action);
 }
 
 .r-display-inline-block{
@@ -209,6 +215,11 @@ input.r-i-control[identity][disabled] {
     padding-left: 10px;
 
 }
+.r-q-b.dark-mode,
+.r-q-l.dark-mode {
+    background-color: red;
+}
+
 
 .r-q-b::-webkit-scrollbar-thumb,
 .r-q-l::-webkit-scrollbar-thumb {
@@ -302,6 +313,10 @@ input.r-i-focus-dependency {
     height: 100%;
     background-color: #f1f1f1;
 }
+.r-w.dark-mode{
+    background-color: #121212;
+}
+
 
 .r-b
 {
@@ -335,7 +350,6 @@ textarea.r-i-control {
 
 .r-head{
     height: var(--heigth-r-facede-action);
-    background-color: var(--color-black);
 }
 
 form.r-f-items{
@@ -350,6 +364,9 @@ form.r-f-items{
     overflow: auto;
 }
 
+.r-facede-action {
+    background-color: var(--bgc-r-facede-action)
+}
 .r-facede-action.top {
     height: 50px;
 }
@@ -390,8 +407,9 @@ form.r-f-items{
 }
 
 .r-a-b i {
-    color: var(--color-write);
+    color: var( --color-icons-action);
     font-size: 1.3rem;
+    cursor: pointer;
 }
 
 .container-r-f{
@@ -513,7 +531,7 @@ form.r-f-items{
     left: 15px;
     top: 11px;
     padding: 0 5px;
-    background: var(--color-write);
+    background: inherit;
     transition: 0.2s ease all;
     -moz-transition: 0.2s ease all;
     -webkit-transition: 0.2s ease all;
@@ -522,7 +540,7 @@ form.r-f-items{
     font-size: 1rem;
     height: 36px;
     padding: 0 5px;
-    background: #fff;
+    background: inherit;
     color: #323840;
     box-sizing: border-box;
 }
@@ -686,8 +704,8 @@ select.did-floating-select::-ms-expand {
         display: block;
         align-content: center;
         text-align: center;
-        background-color: var(--color-black);
-        color: var(--color-write);
+        background-color: var(--bgc-r-facede-action);
+        color: var(--color-icons-action);
     }
 
     .r-message{

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@reginaldo-marinho/rucula-js",
-    "version": "0.0.49",
+    "version": "0.0.50",
     "description": "Crie telas em Minutos! 🚀",
     "homepage": "https://rucula-js.github.io/",
     "bugs": "https://github.com/rucula-js/rucula-js/issues",