implementação do layout

app/app.js

@@ -1,6 +1,7 @@
 var app = (function() {
-  var width = window.innerWidth;
-  var height = window.innerHeight;
+  var width = $("#content").width();
+  var height =
+    $("#sidebar").height() - $("#header").height() - $("#files").height() - 2;
   var layers = [];
   var _layer = [];
   var tools = [];

app/components/circumference.js

@@ -57,8 +57,8 @@ var circunference = (function() {
       x: x,
       y: y,
       radius: 5,
-      fill: "#42f572",
-      stroke: "#33a351",
+      fill: "#9bc364",
+      stroke: "#9bc364",
       strokeWidth: 1,
       strokeScaleEnabled: false,
       draggable: false,

app/components/line.js

@@ -37,7 +37,7 @@ var line = (function() {
       layer.add(ln);
 
       app.stage.draw();
-      
+
       clearState();
       app.clearSelectedTool();
       app.setStatus("");

app/components/point.js

@@ -71,8 +71,8 @@ var point = (function() {
       x: x,
       y: y,
       radius: 5,
-      fill: "#42f572",
-      stroke: "#33a351",
+      fill: "#9bc364",
+      stroke: "#9bc364",
       strokeWidth: 1,
       strokeScaleEnabled: false,
       draggable: false,

assets/images/icons/Circunference.svg

@@ -0,0 +1,55 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+  <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
+<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c142 79.160924, 2017/07/13-01:06:39        ">
+   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+      <rdf:Description rdf:about=""/>
+   </rdf:RDF>
+</x:xmpmeta>
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                           
+<?xpacket end="w"?></metadata>
+<defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #7b7b7b;
+        stroke-width: 1px;
+      }
+
+      .cls-2 {
+        fill: #9bc364;
+      }
+
+      .cls-3 {
+        fill: #cb4848;
+      }
+    </style>
+  </defs>
+  <g id="Circunference">
+    <g id="Circunference-2" data-name="Circunference">
+      <circle class="cls-1" cx="20.484" cy="20.391" r="11.516"/>
+      <ellipse class="cls-2" cx="9.641" cy="21.281" rx="1.641" ry="1.719"/>
+      <circle id="Ellipse_3_copy" data-name="Ellipse 3 copy" class="cls-2" cx="20.359" cy="21.281" r="1.641"/>
+      <ellipse id="Ellipse_3_copy_2" data-name="Ellipse 3 copy 2" class="cls-3" cx="20.359" cy="9.719" rx="1.641" ry="1.719"/>
+    </g>
+  </g>
+</svg>

assets/images/icons/Line.svg

@@ -0,0 +1,49 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+  <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
+<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c142 79.160924, 2017/07/13-01:06:39        ">
+   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+      <rdf:Description rdf:about=""/>
+   </rdf:RDF>
+</x:xmpmeta>
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                           
+<?xpacket end="w"?></metadata>
+<defs>
+    <style>
+      .cls-1 {
+        fill: #464646;
+        fill-rule: evenodd;
+      }
+
+      .cls-2 {
+        fill: #84bb3a;
+      }
+    </style>
+  </defs>
+  <g id="Line">
+    <g id="Line-2" data-name="Line">
+      <path class="cls-1" d="M12.177,10.715L28.291,27.83l-0.469.472L11.708,11.187Z"/>
+      <circle class="cls-2" cx="11.609" cy="10.703" r="2.609"/>
+      <circle id="Ellipse_1_copy" data-name="Ellipse 1 copy" class="cls-2" cx="28.391" cy="28.297" r="2.609"/>
+    </g>
+  </g>
+</svg>

assets/images/icons/Point.svg

@@ -0,0 +1,42 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+  <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
+<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c142 79.160924, 2017/07/13-01:06:39        ">
+   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+      <rdf:Description rdf:about=""/>
+   </rdf:RDF>
+</x:xmpmeta>
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                           
+<?xpacket end="w"?></metadata>
+<defs>
+    <style>
+      .cls-1 {
+        fill: #9bc364;
+      }
+    </style>
+  </defs>
+  <g id="Point">
+    <g id="Point-2" data-name="Point">
+      <circle class="cls-1" cx="20" cy="19" r="4"/>
+    </g>
+  </g>
+</svg>

css/app.css

@@ -0,0 +1,155 @@
+.wrapper {
+  display: block;
+}
+
+#sidebar {
+  min-width: 228px;
+  max-width: 228px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9999;
+  background: #f5f5f5;
+  border-left: #eaeaea 1px solid;
+}
+
+#sidebar #tool-bar .tool {
+  width: 60px;
+  height: 60px;
+  border-radius: 4px;
+  border: 1px solid #aaaaaa;
+  background-color: transparent;
+  margin-left: 9px;
+  position: relative;
+  margin-bottom: 20px;
+  opacity: 0.8;
+}
+
+#sidebar #tool-bar .tool:hover,
+#sidebar #tool-bar .tool:active,
+#sidebar #tool-bar .tool:disabled {
+  transition: opacity 1s linear;
+  transition: border-color 1s linear;
+  transition: border-size 1s linear;
+  opacity: 1;
+  border: 1.3px solid #9bc364;
+  color: #333333;
+}
+
+#sidebar #tool-bar span {
+  position: absolute;
+  left: 0px;
+  bottom: -16px;
+  text-align: center;
+  font-size: 8px;
+  width: 100%;
+  vertical-align: middle;
+  display: none;
+}
+
+#sidebar #tool-bar h3 {
+  font-size: 12px;
+  padding-left: 10px;
+  margin-top: 10px;
+  margin-bottom: 40px;
+}
+
+#header {
+  border-bottom: #eaeaea 1px solid;
+  margin: 0px;
+  padding: 0px;
+}
+#header ul li {
+  margin: 0px 8px 0px 0px;
+  padding: 0px;
+  font-size: 12px;
+  display: inline-block;
+  list-style: none;
+  height: 100%;
+  border-radius: 4px;
+  overflow: hidden;
+}
+#header ul li button {
+  background: transparent;
+  border: none;
+
+  margin: 0px;
+  height: 100%;
+}
+#header ul li button:hover {
+  background: #efefef;
+  transition: background-color 0.5s linear;
+}
+
+#files {
+  background: #eaeaea;
+  height: 32.02px;
+  padding: 0px;
+  margin: 0px;
+}
+#files ul,
+#header ul {
+  list-style: none;
+  list-style-type: none;
+  margin: 0px;
+  padding: 0px;
+  vertical-align: middle;
+  height: 100%;
+}
+#files ul li {
+  margin: 0px 10px 0px 0px;
+  padding: 0px;
+  font-size: 12px;
+  display: inline-block;
+  list-style: none;
+  height: 100%;
+}
+#files ul .file:hover {
+  background: #e0e0e0 !important;
+  color: #333333 !important;
+  transition: background-color 0.3s linear;
+  transition: color 0.3s linear;
+}
+#files ul .file,
+#files ul .file button {
+  padding: 0px;
+  color: #aaaaaa;
+}
+
+#files ul .file button {
+  border: none;
+  margin: 0px;
+  background: transparent;
+  padding: 2px 15px;
+  height: 100%;
+}
+
+#files ul .active button {
+  background: #d4d4d4;
+  color: #555555;
+  margin: 0px;
+}
+
+#files ul .active {
+  background: #d4d4d4;
+  color: #555555;
+  margin: 0px;
+}
+
+#files ul .new button {
+  border: none;
+  padding: 0px;
+  margin: -3px 0px 0px 0px;
+  height: 18px;
+  width: 18px;
+  background: #a4cd6d;
+  border-color: #9bc364;
+  border-radius: 4px;
+  border-right: 1.3px solid #9bc364;
+  border-bottom: 1.3px solid #9bc364;
+  font-size: 10px;
+  text-align: center;
+  vertical-align: middle;
+  color: #555555;
+}

css/icons.css

@@ -0,0 +1,15 @@
+.icon {
+  background: center no-repeat;
+}
+
+.icon-line {
+  background-image: url("../assets/images/icons/Line.png");
+}
+
+.icon-circumference {
+  background-image: url("../assets/images/icons/Circunference.png");
+}
+
+.icon-point {
+  background-image: url("..//assets/images/icons/Point.png");
+}

index.html

@@ -5,19 +5,76 @@
     <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="node_modules/bootstrap/dist/css/bootstrap.min.css"
+    />
+    <link rel="stylesheet" href="css/app.css" />
+    <link rel="stylesheet" href="css/icons.css" />
   </head>
   <body>
-    <div id="tool-bar">
-      <button id="btn-point" onclick="point.click()">Desenhar Ponto</button>
-      <button id="btn-line" onclick="line.click()">Desenhar Reta</button>
-      <button id="btn-circunference" onclick="circunference.click()">
-        Desenhar Circunferência
-      </button>
+    <div class="wrapper">
+      <nav id="sidebar">
+        <div id="tool-bar">
+          <h3>Tools</h3>
+          <div class="tools">
+            <button
+              id="btn-point"
+              class="tool icon icon-point"
+              onclick="point.click()"
+            >
+              <span> Point</span>
+            </button>
+            <button
+              id="btn-line"
+              class="tool icon icon-line"
+              onclick="line.click()"
+            >
+              <span>Line</span>
+            </button>
+            <button
+              id="btn-circunference"
+              class="tool icon icon-circumference"
+              onclick="circunference.click()"
+            >
+              <span>Circunferece</span>
+            </button>
+          </div>
 
-      <span id="status"> </span>
+          <span id="status"> </span>
+        </div>
+      </nav>
+      <div id="content">
+        <nav id="header">
+          <div class="d-flex">
+            <div class="p-1 flex-fill">
+              <ul>
+                <li class="logo">
+                  <img src="assets/logo.png" alt="iGeom.logo" />
+                </li>
+                <li><button>File</button></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 id="files">
+          <ul>
+            <li class="file active"><button>New Document 1</button></li>
+            <li class="file"><button>New Document 2</button></li>
+            <li class="new"><button class="new-file">+</button></li>
+          </ul>
+        </nav>
+        <div id="container"></div>
+      </div>
     </div>
-    <div id="container"></div>
-    <script src="https://unpkg.com/konva@3.3.3/konva.min.js"></script>
+    <script src="node_modules/jquery/dist/jquery.min.js"></script>
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+    <script src="node_modules/konva/konva.min.js"></script>
     <script src="app/app.js"></script>
     <script src="app/components/line.js"></script>
     <script src="app/components/point.js"></script>
@@ -25,7 +82,5 @@
     <script>
       app.bootstrap();
     </script>
-
-
   </body>
 </html>

package-lock.json

@@ -4,6 +4,16 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "bootstrap": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz",
+      "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag=="
+    },
+    "jquery": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
+      "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
+    },
     "konva": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/konva/-/konva-3.4.0.tgz",

package.json

@@ -4,6 +4,8 @@
   "description": "",
   "main": "index.js",
   "dependencies": {
+    "bootstrap": "^4.3.1",
+    "jquery": "^3.4.1",
     "konva": "^3.4.0"
   },
   "devDependencies": {},