Set up toolbar

souravtecken · Mar 26, 2020 · d3f535c · d3f535c
1 parent 51e8882
commit d3f535c
Show file tree

Hide file tree

Showing 33 changed files with 5,987 additions and 18 deletions.
diff --git a/css/index.css b/css/index.css
@@ -2,7 +2,8 @@ html, body {
     margin: 0;
     padding: 0;
     min-height: 100vh;
-    min-width: 100%;    
+    min-width: 100%;
+    background-color: #E2E1E0 !important;
 }
 
 canvas {
@@ -14,10 +15,33 @@ canvas {
     z-index: 1000;
 }
 
-#mainContainer {
+#toolBarContainer {
+    width: 5rem;
+}
+.toolButtonBox:hover {
+    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+}
+
+.toolButtonBox {
+    cursor: pointer;
+    text-align: center;
     margin: 0;
+    padding: 0 !important;
+    width: 100%;
+    border: none;
+    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
 }
 
-#canvasContainer {
-    background-color: #E2E1E0 !important;
+.toolButton {
+    cursor: pointer;
+    border: none;
+    height: 100%;
+    width: 100%;
+    outline: none;
+    background-color: white;
+    font-size: 2rem;
+}
+
+.activeToolButton {
+    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
 }
diff --git a/index.html b/index.html
@@ -10,17 +10,43 @@
     <script type="text/javascript" src="./js/paint.js"></script>
 </head>    
 
-<body>        
-    <div id="mainContainer" class="ui bottom attached segment pushable">
-        <div class="ui visible inverted left vertical sidebar menu">
-
+<body>    
+    <div id="toolBarContainer" class="ui mini left fixed vertical menu">
+        <div class="toolButtonBox">
+            <button class="toolButton">
+                <i class="pencil icon"></i>
+            </button>
         </div>
-        <div id="canvasContainer" class="pusher">            
-            <canvas id="myCanvas" height="600px" width="800px" oncontextmenu="return false;">
-                Hello, World!
-            </canvas>            
+        <div class="toolButtonBox">
+            <button class="toolButton">
+                <i class="paint brush icon"></i>
+            </button>
         </div>
-    </div>
+        <div class="ui left pointing dropdown link toolButtonBox">
+            <div class="menu">
+                <div class="item">To be color palette</div>
+            </div>
+            <button class="toolButton">
+                <i class="tint icon"></i>
+            </button>
+        </div>
+
+        <div class="toolButtonBox">
+            <button class="toolButton">
+                <i class="eraser icon"></i>
+            </button>
+        </div>
+        <div class="toolButtonBox">
+            <button class="toolButton">
+                <i class="trash icon"></i>
+            </button>
+        </div>
+    </div>    
+
+    <canvas id="myCanvas" height="600px" width="800px" oncontextmenu="return false;">
+        Hello, World!
+    </canvas>            
+
     <script type="text/javascript" src="./js/index.js"></script>
 </body>
 

diff --git a/js/index.js b/js/index.js
@@ -19,9 +19,13 @@ canvas.addEventListener("mousedown", (event) => {
     ctx.moveTo(event.offsetX, event.offsetY);
 })
 
-initCanvas(ctx);
+function initToolBox(){
+    const toolButtonWidth = $('.toolButtonBox').width();
+    $('.toolButtonBox').css({'height':`${toolButtonWidth}px`});
+
+    $('.ui.dropdown')
+        .dropdown();
+}
 
-$('.visible.example .ui.sidebar')
-    .sidebar({
-        context: '.visible.example .bottom.segment'
-    }).sidebar('hide');
+initCanvas(ctx);
+initToolBox();
diff --git a/semantic-ui/themes/basic/assets/fonts/icons.eot b/semantic-ui/themes/basic/assets/fonts/icons.eot
diff --git a/semantic-ui/themes/basic/assets/fonts/icons.svg b/semantic-ui/themes/basic/assets/fonts/icons.svg
diff --git a/semantic-ui/themes/basic/assets/fonts/icons.ttf b/semantic-ui/themes/basic/assets/fonts/icons.ttf
diff --git a/semantic-ui/themes/basic/assets/fonts/icons.woff b/semantic-ui/themes/basic/assets/fonts/icons.woff
diff --git a/semantic-ui/themes/default/assets/fonts/brand-icons.eot b/semantic-ui/themes/default/assets/fonts/brand-icons.eot
diff --git a/semantic-ui/themes/default/assets/fonts/brand-icons.svg b/semantic-ui/themes/default/assets/fonts/brand-icons.svg
diff --git a/semantic-ui/themes/default/assets/fonts/brand-icons.ttf b/semantic-ui/themes/default/assets/fonts/brand-icons.ttf
diff --git a/semantic-ui/themes/default/assets/fonts/brand-icons.woff b/semantic-ui/themes/default/assets/fonts/brand-icons.woff
diff --git a/semantic-ui/themes/default/assets/fonts/brand-icons.woff2 b/semantic-ui/themes/default/assets/fonts/brand-icons.woff2
diff --git a/semantic-ui/themes/default/assets/fonts/icons.eot b/semantic-ui/themes/default/assets/fonts/icons.eot
diff --git a/semantic-ui/themes/default/assets/fonts/icons.otf b/semantic-ui/themes/default/assets/fonts/icons.otf
diff --git a/semantic-ui/themes/default/assets/fonts/icons.svg b/semantic-ui/themes/default/assets/fonts/icons.svg
diff --git a/semantic-ui/themes/default/assets/fonts/icons.ttf b/semantic-ui/themes/default/assets/fonts/icons.ttf
diff --git a/semantic-ui/themes/default/assets/fonts/icons.woff b/semantic-ui/themes/default/assets/fonts/icons.woff
diff --git a/semantic-ui/themes/default/assets/fonts/icons.woff2 b/semantic-ui/themes/default/assets/fonts/icons.woff2
diff --git a/semantic-ui/themes/default/assets/fonts/outline-icons.eot b/semantic-ui/themes/default/assets/fonts/outline-icons.eot
diff --git a/semantic-ui/themes/default/assets/fonts/outline-icons.svg b/semantic-ui/themes/default/assets/fonts/outline-icons.svg
diff --git a/semantic-ui/themes/default/assets/fonts/outline-icons.ttf b/semantic-ui/themes/default/assets/fonts/outline-icons.ttf
diff --git a/semantic-ui/themes/default/assets/fonts/outline-icons.woff b/semantic-ui/themes/default/assets/fonts/outline-icons.woff
diff --git a/semantic-ui/themes/default/assets/fonts/outline-icons.woff2 b/semantic-ui/themes/default/assets/fonts/outline-icons.woff2
diff --git a/semantic-ui/themes/default/assets/images/flags.png b/semantic-ui/themes/default/assets/images/flags.png
diff --git a/semantic-ui/themes/github/assets/fonts/octicons-local.ttf b/semantic-ui/themes/github/assets/fonts/octicons-local.ttf
diff --git a/semantic-ui/themes/github/assets/fonts/octicons.svg b/semantic-ui/themes/github/assets/fonts/octicons.svg
diff --git a/semantic-ui/themes/github/assets/fonts/octicons.ttf b/semantic-ui/themes/github/assets/fonts/octicons.ttf
diff --git a/semantic-ui/themes/github/assets/fonts/octicons.woff b/semantic-ui/themes/github/assets/fonts/octicons.woff
diff --git a/semantic-ui/themes/material/assets/fonts/icons.eot b/semantic-ui/themes/material/assets/fonts/icons.eot
diff --git a/semantic-ui/themes/material/assets/fonts/icons.svg b/semantic-ui/themes/material/assets/fonts/icons.svg
diff --git a/semantic-ui/themes/material/assets/fonts/icons.ttf b/semantic-ui/themes/material/assets/fonts/icons.ttf
diff --git a/semantic-ui/themes/material/assets/fonts/icons.woff b/semantic-ui/themes/material/assets/fonts/icons.woff
diff --git a/semantic-ui/themes/material/assets/fonts/icons.woff2 b/semantic-ui/themes/material/assets/fonts/icons.woff2