Przeglądaj źródła

fix css header bar and menu

Victor Luiz Domingues 4 lat temu
rodzic
commit
310665e38e
3 zmienionych plików z 104 dodań i 79 usunięć
  1. 4 1
      src/app/app.js
  2. 31 8
      src/css/app.css
  3. 69 70
      src/index.html

+ 4 - 1
src/app/app.js

@@ -7,7 +7,7 @@ import { menu as Menu } from "./core/application/menu";
 import Konva from "konva";
 import { COMPONENT_TYPE } from "./core/enums/component-type-enum";
 import { headerMenu } from "./core/application/header-menu";
-export const app = (function() {
+export const app = (function () {
   let _selectedTool = [];
   function _bootstrap() {
     Konva.showWarnings = false;
@@ -15,6 +15,9 @@ export const app = (function() {
     Selector.bootstrap();
     requireAll(require.context("./component-registry/", true, /\.js$/));
     _refreshMenu();
+    $("body").on("mouseenter", ".li-content", e => $(e.currentTarget).parent().find('.level-1').css("background-color", "#d4d4d4"));
+    $("body").on("mouseleave", ".li-content", e => $(e.currentTarget).parent().find('.level-1').css("background-color", "transparent"));
+    ;
   }
 
   function _currentLayer() {

+ 31 - 8
src/css/app.css

@@ -68,28 +68,33 @@
   padding: 0px;
 }
 #header #logo img {
-  margin-top: 4px;
+  margin-top: -5px !important;
   margin-left: 10px;
+  width: 65px;
 }
 #header ul li {
   margin: 0px 8px 0px 0px;
   padding: 0px;
   font-size: 12px;
-  display: inline-block;
+  display: inline;
   list-style: none;
-  height: 100%;
+  min-height: 26px;
   border-radius: 4px;
   overflow: hidden;
+  position: relative;
 }
+
 #header ul li button {
   background: transparent;
   border: none;
   margin: 0px;
-  height: 100%;
+  min-height: 26px;
+  border-radius: 4px 4px 0px 0px;
 }
-#header ul li button:hover {
-  background: #efefef;
-  transition: background-color 0.5s linear;
+#header ul li button:hover,
+#header ul li .level-1:hover {
+  background-color: #d4d4d4 !important;
+  transition: background-color 0.5s linear !important;
 }
 
 #header ul li .li-content {
@@ -100,7 +105,14 @@
   box-shadow: 0px 10px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 1;
   height: auto;
-  top: 28px;
+  top: 20px;
+  left: 0px;
+}
+#header ul li .li-content:hover,
+#header ul li:has(button:hover),
+#header ul li:has(.li-content) {
+  background-color: #d4d4d4;
+  transition: background-color 0.5s linear;
 }
 .li-content li {
   width: 100%;
@@ -127,6 +139,9 @@
   padding: 0px;
   margin: 0px;
 }
+#header ul {
+  min-height: 26px;
+}
 .files ul,
 #header ul {
   list-style: none;
@@ -222,3 +237,11 @@
   -webkit-animation-name: fadeInRight;
   animation-name: fadeInRight;
 }
+
+#content {
+  padding-right: 228px;
+}
+
+.center {
+  text-align: center;
+}

+ 69 - 70
src/index.html

@@ -1,76 +1,75 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Proof of Concept - iGeom - Web</title>
-    <link rel="stylesheet" href="css/bootstrap.min.css" />
-    <link rel="stylesheet" href="css/app.css" />
-    <link rel="stylesheet" href="css/icons.css" />
-  </head>
-  <body>
-    <div class="wrapper">
-      <nav id="sidebar">
-        <div id="tool-bar">
-          <h3>Tools</h3>
-          <span id="status"></span>
-          <div id="tools" class="tools">
-            <button id="btn-point" class="tool icon icon-point" onclick="">
-              <span> </span>
-            </button>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <title>Proof of Concept - iGeom - Web</title>
+  <link rel="stylesheet" href="css/bootstrap.min.css" />
+  <link rel="stylesheet" href="css/app.css" />
+  <link rel="stylesheet" href="css/icons.css" />
+</head>
+
+<body>
+  <div class="wrapper">
+    <nav id="sidebar">
+      <div id="tool-bar">
+        <h3>Tools</h3>
+        <span id="status"></span>
+        <div id="tools" class="tools">
+          <button id="btn-point" class="tool icon icon-point" onclick="">
+            <span> </span>
+          </button>
+        </div>
+      </div>
+    </nav>
+    <div id="content">
+      <nav id="header">
+        <div class="d-flex">
+          <div class="p-1 flex-fill">
+            <ul>
+              <li id="logo" style="overflow: inherit !important; ">
+                <img src="assets/images/Logo.png" style="margin-top:-16px;" alt="iGeom.logo" />
+              </li>
+              <li>
+                <button class="level-1">
+                  File
+                  <input type="file" id="input-file" />
+                </button>
+                <ul class="li-content">
+                  <li><button id="open">Open</button></li>
+                  <li><button id="save">Save</button></li>
+                </ul>
+              </li>
+              <li><button class="level-1">Edit</button></li>
+            </ul>
+          </div>
+          <div class="p-1 flex-fill center">
+            <div id="selected-document">New Document 1</div>
           </div>
+          <div class="p-1 flex-fill"></div>
         </div>
       </nav>
-      <div id="content">
-        <nav id="header">
-          <div class="d-flex">
-            <div class="p-1 flex-fill">
-              <ul>
-                <li id="logo" style="overflow: inherit !important; ">
-                  <img
-                    src="assets/images/Logo.png"
-                    style="margin-top:-16px;"
-                    alt="iGeom.logo"
-                  />
-                </li>
-                <li>
-                  <button>
-                    File
-                    <input type="file" id="input-file" />
-                  </button>
-                  <ul class="li-content">
-                    <li><button id="open">Open</button></li>
-                    <li><button id="save">Save</button></li>
-                  </ul>
-                </li>
-                <li><button>Edit</button></li>
-              </ul>
-            </div>
-            <div class="p-1 flex-fill">
-              <div id="selected-document">New Document 1</div>
-            </div>
-            <div class="p-1 flex-fill"></div>
-          </div>
-        </nav>
-        <nav class="files">
-          <ul>
-            <li>
-              <ul id="files">
-                <li class="file active"><button>New Document 1</button></li>
-              </ul>
-            </li>
-            <li id="new-document" class="new">
-              <button class="new-file">+</button>
-            </li>
-          </ul>
-        </nav>
-        <div id="stages"></div>
-      </div>
+      <nav class="files">
+        <ul>
+          <li>
+            <ul id="files">
+              <li class="file active"><button>New Document 1</button></li>
+            </ul>
+          </li>
+          <li id="new-document" class="new">
+            <button class="new-file">+</button>
+          </li>
+        </ul>
+      </nav>
+      <div id="stages"></div>
     </div>
-    <script src="js/jquery.min.js"></script>
-    <script src="js/bootstrap.min.js"></script>
-    <script src="js/konva.min.js"></script>
-    <script src="js/main.js"></script>
-  </body>
-</html>
+  </div>
+  <script src="js/jquery.min.js"></script>
+  <script src="js/bootstrap.min.js"></script>
+  <script src="js/konva.min.js"></script>
+  <script src="js/main.js"></script>
+</body>
+
+</html>