Skip to content

Commit bd68ff6

Browse files
author
Marakaido
committed
Change ui
1 parent 82038aa commit bd68ff6

File tree

5 files changed

+192
-56
lines changed

5 files changed

+192
-56
lines changed

‎Icons/fabric_plaid.png

5.12 KB
Loading

‎gui.js

+9-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,14 @@ var GUI = {
22
TOOL_MENU: "toolMenu",
33
TOOL_MENU_BUTTON: "toolMenuButton",
44

5+
init: function()
6+
{
7+
var root = document.getElementById("root");
8+
root.style.background = "repeating-linear-gradient(135deg,#474451,#474451 50px,#4c4957 50px,#4c4957 100px)";
9+
root.style.width = window.innerWidth + 'px';
10+
root.style.height = window.innerHeight + 'px';
11+
},
12+
513
close: function(elementId)
614
{
715
document.getElementById(elementId).style.display = 'none';
@@ -18,7 +26,7 @@ var GUI = {
1826
{
1927
Application.activateTool(tool);
2028
this.close(this.TOOL_MENU);
21-
document.getElementById(this.TOOL_MENU_BUTTON).style.backgroundImage = "url('Icons/"+tool.icon+"')";
29+
document.getElementById(this.TOOL_MENU_BUTTON).src = "Icons/"+tool.icon;
2230
},
2331
filterButtonClicked: function(filter)
2432
{

‎index.html

+67-37
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
99
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
10-
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-blue.css">
10+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:light">
1111
<link rel="stylesheet" href="style.css">
1212

1313
<script src="jscolor.js"></script>
@@ -20,50 +20,80 @@
2020
<canvas id="uiCanvas" style="width: 100%; height: 100%;"></canvas>
2121
</div>
2222

23-
<footer class="tool-menu">
24-
<div id="toolMenuButton" class="toolButton" onclick="GUI.open(GUI.TOOL_MENU)"></div>
25-
<input type="file" onchange="loadFile()" id="fileInput">
23+
<div class="menu">
24+
<div class="toolMenuButtonContainer">
25+
<div id="toolMenuButton" onclick="GUI.open(GUI.TOOL_MENU)"></div>
26+
<div class="loader toolButtonLoader"></div>
27+
</div>
28+
<!--<input type="file" onchange="loadFile()" id="fileInput">
2629
<a id="downloadLink" onclick="downloadImage()">Download</a>
2730
<button class="jscolor {valueElement:null,value:'000000', onFineChange:'Application.values.setColor(this)'}" id="colorPicker"></button>
28-
</footer>
29-
</div>
30-
<div id="toolMenu" style="display:none;" class="w3-modal" onclick="GUI.close('toolMenu')">
31-
<div class="w3-modal-content">
32-
<div>
33-
<div class="toolButton" onclick="GUI.toolButtonClicked(Pencil)">
34-
<img src="Icons/pencil.png" alt="pencil tool">
35-
</div>
36-
<div class="toolButton" onclick="GUI.toolButtonClicked(Eraser)">
37-
<img src="Icons/Erase-50.png" alt="Eraser tool">
38-
</div>
39-
<div class="toolButton" onclick="GUI.toolButtonClicked(ColorPicker)">
40-
<img src="Icons/Color_picker.png" alt="Color picker tool">
41-
</div>
42-
<div class="toolButton" onclick="GUI.toolButtonClicked(Hand)">
43-
<img src="Icons/Hand.png" alt="Hand tool">
44-
</div>
45-
<div class="toolButton" onclick="GUI.toolButtonClicked(Zoom)">
46-
<img src="Icons/Search.png" alt="Zoom tool">
47-
</div>
48-
<div class="toolButton" onclick="GUI.toolButtonClicked(PaintBucket)">
49-
<img src="Icons/PaintBucket.png" alt="Paint Bucket tool">
50-
</div>
51-
<div class="toolButton" onclick="GUI.toolButtonClicked(BrushSelection)">
52-
<img src="Icons/pencil.png" alt="Brush selection tool">
53-
</div>
54-
</div>
31+
-->
5532
</div>
56-
<div>
57-
<button onclick="GUI.filterButtonClicked(Filters.grayscale)">Grayscale</button>
58-
<button onclick="GUI.filterButtonClicked(Filters.negative)">Negative</button>
59-
<button onclick="GUI.filterButtonClicked(Filters.blur)">Blur</button>
60-
<button onclick="GUI.filterButtonClicked(Filters.sharpen)">Sharpen</button>
33+
</div>
34+
<div id="toolMenu" onclick="GUI.close('toolMenu')">
35+
<div class="w3-modal-content w3-animate-left">
36+
<ul>
37+
<li>
38+
<h2>Drawing</h2>
39+
<ul>
40+
<li>
41+
<img class="toolButton" onclick="GUI.toolButtonClicked(Pencil)" src="Icons/pencil.png" alt="Pencil tool">
42+
</li>
43+
<li>
44+
<img class="toolButton" onclick="GUI.toolButtonClicked(Eraser)" src="Icons/Erase-50.png" alt="Eraser tool">
45+
</li>
46+
<li>
47+
<img class="toolButton" onclick="GUI.toolButtonClicked(PaintBucket)" src="Icons/PaintBucket.png" alt="Paint Bucket tool">
48+
</li>
49+
</ul>
50+
</li>
51+
<li>
52+
<h2>Navigation</h2>
53+
<ul>
54+
<li>
55+
<img class="toolButton" onclick="GUI.toolButtonClicked(Hand)" src="Icons/Hand.png" alt="Hand tool">
56+
</li>
57+
<li>
58+
<img class="toolButton" onclick="GUI.toolButtonClicked(Zoom)" src="Icons/Search.png" alt="Zoom tool">
59+
</li>
60+
</ul>
61+
</li>
62+
<li>
63+
<h2>Selection</h2>
64+
<ul>
65+
<li>
66+
<img class="toolButton" onclick="GUI.toolButtonClicked(BrushSelection)" src="Icons/pencil.png" alt="Brush selection tool">
67+
</li>
68+
<li>
69+
<img class="toolButton" onclick="GUI.toolButtonClicked(ColorPicker)" src="Icons/Color_picker.png" alt="Color picker tool">
70+
</li>
71+
</ul>
72+
</li>
73+
<li>
74+
<h2>Filters</h2>
75+
<ul>
76+
<li>
77+
<button onclick="GUI.filterButtonClicked(Filters.grayscale)">Grayscale</button>
78+
</li>
79+
<li>
80+
<button onclick="GUI.filterButtonClicked(Filters.negative)">Negative</button>
81+
</li>
82+
<li>
83+
<button onclick="GUI.filterButtonClicked(Filters.blur)">Blur</button>
84+
</li>
85+
<li>
86+
<button onclick="GUI.filterButtonClicked(Filters.sharpen)">Sharpen</button>
87+
</li>
88+
</ul>
89+
</li>
90+
</ul>
6191
</div>
6292
</div>
6393
</body>
94+
<script src="gui.js"></script>
6495
<script src="setup.js"></script>
6596
<script src="fileOperations.js"></script>
6697
<script src="tools.js"></script>
67-
<script src="gui.js"></script>
6898
<script src="filters.js"></script>
6999
</html>

‎setup.js

+1
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ var Application = {
5959
this.initCanvas();
6060
this.initContext();
6161
this.calculateZoom();
62+
GUI.init();
6263
},
6364

6465
initCanvas: function(width, height)

‎style.css

+115-18
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,23 @@
1-
html body
1+
body
22
{
3-
background-color: #6C7A89;
3+
background-color: #474451;
44
padding: 0px;
55
margin: 0px;
6+
overflow: hidden;
7+
}
8+
9+
body,h1,h2,h3,h4,h5,h6
10+
{
11+
font-family: "Lato", sans-serif;
12+
}
13+
#root
14+
{
15+
width: 100%;
16+
height: 100%;
17+
padding: 0px;
18+
margin: 0px;
19+
overflow: hidden;
20+
background-color: rgba(0, 0, 0, 0.1);
621
}
722

823
#selectionCanvas
@@ -38,40 +53,117 @@ html body
3853
opacity: 0.3;
3954
}
4055

41-
.tool-menu
56+
.menu
4257
{
43-
height: 50px;
4458
width: 100%;
4559

4660
position: fixed;
4761
left: 0px;
4862
bottom: 0px;
4963

5064
background-color: white;
65+
/*background-image: url('Icons/fabric_plaid.png');*/
66+
box-shadow: -6px 0px 5px black;
67+
68+
z-index: 2;
69+
}
70+
.toolMenuButtonContainer
71+
{
72+
width: 100px;
73+
height: 100px;
74+
75+
position: relative;
76+
top: -50px;
77+
margin: 0px auto -50px auto;
78+
79+
background-color: #474451;
80+
81+
border-radius: 50px;
82+
z-index: 3;
83+
}
84+
85+
#toolMenuButton
86+
{
87+
width: 70px;
88+
height: 70px;
89+
margin: 15px;
90+
position: relative;
91+
top: 15px;
92+
93+
background-color: white;
94+
background-image: url('Icons/Hand.png');
95+
background-repeat: no-repeat;
96+
background-position: center;
97+
border-radius: 35px;
98+
z-index: 4;
99+
}
100+
101+
.toolButtonLoader
102+
{
103+
width: 100%;
104+
height: 100%;
105+
position: relative;
106+
top: -85px;
107+
108+
border: 16px solid #474451; /* Light grey */
109+
border-top: 16px solid #3498db; /* Blue */
110+
border-radius: 50%;
111+
112+
animation: spin 1.3s linear infinite;
113+
114+
z-index: 2;
115+
}
116+
117+
#toolMenu
118+
{
119+
position: absolute;
120+
top: 0px;
121+
left: 0px;
122+
width: 100%;
123+
height: 100%;
124+
background-color: rgba(0, 0, 0, 0.2);
125+
color: #FFFFFF;
126+
overflow: hidden;
127+
display: none;
128+
}
129+
130+
#toolMenu ul
131+
{
132+
list-style-type: none;
133+
margin: 0;
134+
padding: 0;
135+
}
136+
137+
#toolMenu > div > ul > li > ul > li
138+
{
139+
display: inline-block;
140+
}
141+
142+
#toolMenu .w3-modal-content
143+
{
144+
background-color:transparent;
145+
height: 100%;
146+
width: 100%;
147+
overflow: auto;
148+
padding-left: 30%;
51149
}
52150

53151
.toolButton
54152
{
55-
display:block;
56-
float: left;
57153
width: 70px;
58154
height: 70px;
59155
border-radius: 35px;
60156
padding: 10px;
61157
margin: 10px;
62-
background-color: white;
63-
box-shadow: 3px 3px 2px black;
158+
background-color: #FFFFFF;
159+
box-shadow: 3px 3px 3px #5b5b5b;
160+
opacity: 1;
64161
}
65162
.toolButton:hover
66163
{
67164
background-color: lightgray;
68165
}
69166

70-
#toolMenuButton
71-
{
72-
margin: 0px;
73-
}
74-
75167
header, footer
76168
{
77169
height: 5%;
@@ -99,9 +191,14 @@ header *, footer *
99191
height: 100%;
100192
padding:0px;
101193
margin: 0px;
102-
-webkit-filter: blur(4px);
103-
-moz-filter: blur(4px);
104-
-ms-filter: blur(4px);
105-
-o-filter: blur(4px);
106-
filter: blur(4px);
194+
-webkit-filter: blur(12px);
195+
-moz-filter: blur(12px);
196+
-ms-filter: blur(12px);
197+
-o-filter: blur(12px);
198+
filter: blur(12px);
199+
}
200+
201+
@keyframes spin {
202+
0% { transform: rotate(0deg); }
203+
100% { transform: rotate(360deg); }
107204
}

0 commit comments

Comments
 (0)