Home Explore Help
Sign In
victordomingues
/
poc-igeom
1
1
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

fix css header bar and menu

Victor Luiz Domingues 4 years ago
parent
74c76b3ee7
commit
310665e38e
3 changed files with 104 additions and 79 deletions
Unified View Show Diff Stats
  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
View File 

@@ -7,7 +7,7 @@ import { menu as Menu } from "./core/application/menu";
 
 import Konva from "konva";
 
 import Konva from "konva";
 
 import { COMPONENT_TYPE } from "./core/enums/component-type-enum";
 
 import { COMPONENT_TYPE } from "./core/enums/component-type-enum";
 
 import { headerMenu } from "./core/application/header-menu";
 
 import { headerMenu } from "./core/application/header-menu";
 
-export const app = (function() {
 
+export const app = (function () {
 
   let _selectedTool = [];
 
   let _selectedTool = [];
 
   function _bootstrap() {
 
   function _bootstrap() {
 
     Konva.showWarnings = false;
 
     Konva.showWarnings = false;
 
@@ -15,6 +15,9 @@ export const app = (function() {
 
     Selector.bootstrap();
 
     Selector.bootstrap();
 
     requireAll(require.context("./component-registry/", true, /\.js$/));
 
     requireAll(require.context("./component-registry/", true, /\.js$/));
 
     _refreshMenu();
 
     _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() {
 
   function _currentLayer() {

+ 31 - 8
src/css/app.css
View File 

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

+ 69 - 70
src/index.html
View File 

@@ -1,76 +1,75 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <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>
 
+          <div class="p-1 flex-fill"></div>
 
         </div>
 
         </div>
 
       </nav>
 
       </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>
 
     </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>