Skip to content

Commit 111bcd5

Browse files
nikitaeverywherenikitaeverywhere
committed
Header and back button add
1 parent 93ad977 commit 111bcd5

File tree

8 files changed

+127
-16
lines changed

8 files changed

+127
-16
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "cache-visual-editor",
33
"printableName": "Cache Visual Editor",
4-
"version": "0.2.0",
4+
"version": "0.2.2",
55
"description": "Visual class editor for InterSystems Caché",
66
"main": "index.js",
77
"keywords": [

‎source/client/index.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@
1616
<div class="pages">
1717
<div class="page" id="classBuilder">
1818
<div class="header">
19-
19+
<div class="medium menu icon"></div>
20+
<div class="medium back icon" id="backButton"></div>
21+
<span class="title">Class Editor</span>
2022
</div>
2123
<div class="body" id="classBuilderBody">
2224

‎source/client/js/classEditor/card.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ function block (className, element = "div") {
88

99
function getPropertyBlock (prop) {
1010
let item = block(`item`),
11-
icon = block(`icon public`),
11+
icon = block(`icon ${ prop["Private"] ? "private" : "public" }`),
1212
text = block(`label`, `span`),
1313
type = prop["Type"] || prop["ReturnType"] || prop["MimeType"] || "";
1414
item.appendChild(icon);

‎source/client/js/classEditor/index.js‎

Lines changed: 36 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,27 @@ import { getList } from "../server";
22
import { AutoGrid } from "../autoGrid";
33
import { getCardElement } from "./card";
44

5-
var PATH = "";
5+
var PATH = "",
6+
INITIALIZED = false;
7+
8+
let initCallbacks = [];
69

710
/**
811
* @type {AutoGrid}
912
*/
10-
let grid = null;
13+
let grid = onInit(() => grid = new AutoGrid(document.querySelector("#classBuilderBody")));
14+
/**
15+
* @type {HTMLElement}
16+
*/
17+
let backButton = onInit(() => {
18+
19+
backButton = document.querySelector("#backButton");
20+
backButton.addEventListener("click", () => {
21+
if (PATH === "") return;
22+
loadLevel(PATH.replace(/\.?[^\.]+$/, ""));
23+
});
24+
25+
});
1126

1227
function orderData (data) {
1328
var sortable = [],
@@ -28,9 +43,16 @@ function orderData (data) {
2843
}
2944

3045
export function loadLevel (level) {
46+
3147
PATH = level;
3248
grid.clear();
49+
50+
if (PATH === "")
51+
backButton.style.display = "none";
52+
3353
getList("SAMPLES", PATH, (data) => {
54+
if (PATH !== "")
55+
backButton.style.display = "";
3456
data = orderData(data);
3557
for (let obj in data) {
3658
grid.applyChild(getCardElement(data[obj]));
@@ -39,9 +61,20 @@ export function loadLevel (level) {
3961

4062
}
4163

64+
export function onInit (callback) {
65+
if (typeof callback !== "function") throw new Error(`onInit requires function`);
66+
if (INITIALIZED)
67+
callback();
68+
else
69+
initCallbacks.push(callback);
70+
return "Duck";
71+
}
72+
4273
export function init () {
4374

44-
grid = new AutoGrid(document.querySelector("#classBuilderBody"));
75+
INITIALIZED = true;
76+
initCallbacks.forEach(cb => cb());
77+
initCallbacks = [];
4578

4679
loadLevel(PATH);
4780

‎source/client/scss/basic.scss‎

Lines changed: 43 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,52 @@
22

33
html, body {
44
margin: 0;
5+
padding: 0;
56
background: #eee;
67
font-family: Verdana, Geneva, sans-serif;
78
font-size: 18px;
89
}
910

10-
body {
11-
margin: $defaultMargin;
11+
.page {
12+
13+
> .header {
14+
15+
position: fixed;
16+
top: 0;
17+
left: 0;
18+
right: 0;
19+
z-index: 100;
20+
height: $big;
21+
background: white;
22+
box-shadow: $defaultShadow;
23+
padding: $defaultPadding;
24+
box-sizing: border-box;
25+
white-space: nowrap;
26+
overflow: hidden;
27+
text-overflow: ellipsis;
28+
29+
.icon {
30+
31+
margin: 0 $defaultMargin 0 0;
32+
cursor: pointer;
33+
34+
&:hover {
35+
background-position: 50%;
36+
background-size: 80% 80%;
37+
}
38+
39+
}
40+
41+
> .title {
42+
font-size: 24px;
43+
font-weight: bold;
44+
vertical-align: middle;
45+
}
46+
47+
}
48+
49+
> .body {
50+
margin: $defaultMargin+$big $defaultMargin $defaultMargin $defaultMargin;
51+
}
52+
1253
}

‎source/client/scss/const.scss‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,8 @@
1-
$defaultMargin: 10px;
2-
$defaultPadding: 6px;
1+
$small: 16px;
2+
$medium: 36px;
3+
$big: 48px;
4+
$huge: 64px;
5+
6+
$defaultMargin: 5px;
7+
$defaultPadding: 6px;
8+
$defaultShadow: 0 1px 3px rgba(0, 0, 0, .4);

‎source/client/scss/grid/cards.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@
33

44
.card {
55
background: #fff;
6-
margin: $defaultMargin/2;
6+
box-sizing: border-box;
7+
margin: $defaultMargin;
78
padding: $defaultPadding;
89
border-radius: 3px;
9-
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
10+
box-shadow: $defaultShadow;
1011
}
1112

1213
.AutoGrid-container {

‎source/client/scss/icons.scss‎

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,40 @@
1+
@import "const";
2+
@import "mixins";
3+
14
.icon {
5+
position: relative;
26
display: inline-block;
37
vertical-align: middle;
48
margin: 2px;
5-
width: 18px;
6-
height: 18px;
9+
width: $small;
10+
height: $small;
11+
background-size: 100% 100%;
12+
background-repeat: no-repeat;
13+
@include transition(all .3s ease);
14+
}
15+
16+
.medium.icon {
17+
width: $medium;
18+
height: $medium;
19+
}
20+
21+
.big.icon {
22+
width: $big;
23+
height: $big;
724
}
825

926
.icon.public {
10-
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAgVBMVEUAAACm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14X7TPrzAAAAKnRSTlMA1j0u0koqj0UyFPTlJt46CuvMuDakIPDa0IR6d8bDs6yJfXFgVL2YWGdryPEzAAABw0lEQVRYw9WX2XaDIBBAte5L3KMmmmgSs83/f2DbQLUNRAY8pz29jwI3MDBD0L5jD4d1nvfXxvI1efzWhJGgO8uObyr4SebKDC8zYHHw470AeOTY8SsgKBtCIKiuYg0j6WV97TcwEWMCMPburISE9DTOKUIIdkC5T9+ScVbi82AD5cZdly4UOEA4PH1PgWAgt6B6/n6jgq1gvDFtGH8KO4HgTgXFq7UFCSoEKdtypmpvXtCTXpfXi7PmBTnpdeUUCCoY5gV7dhMpCY3iCXEO+ZsVkaZmXkAryZHTpFO3siCkJ0RZUFgPVvMCWopbTQxe4NteUcRx/PaKOC68r4nVTKjjPgAMkeOTlHkK9RHQVO7n71nuB1apUU6AhZ8nJUiRciq0HAOTQJJ0TApLsmEuOUnMPxfovyYIkAKbP7o1/MJRF4TknFvKAntMEzVBPrZWaoJmugLUBNulgkywBHEyueM9rCgIyNU/gKoAInJIFwqMBYKaNGHS2ePP4D8JmF7TH7XzAgFcfM0L+VUZJ4DARJZ1e+m9UCqWdfWrrcY+n9DPsoOkgHmdJoCH/xZwQYIw0TgGfBj2/Ed+0ma1LqQ2u8cr7R2alVquL2OXZgAAAABJRU5ErkJggg==');
11-
background-size: 100% 100%;
27+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAgVBMVEUAAACm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14Wm14X7TPrzAAAAKnRSTlMA1j0u0koqj0UyFPTlJt46CuvMuDakIPDa0IR6d8bDs6yJfXFgVL2YWGdryPEzAAABw0lEQVRYw9WX2XaDIBBAte5L3KMmmmgSs83/f2DbQLUNRAY8pz29jwI3MDBD0L5jD4d1nvfXxvI1efzWhJGgO8uObyr4SebKDC8zYHHw470AeOTY8SsgKBtCIKiuYg0j6WV97TcwEWMCMPburISE9DTOKUIIdkC5T9+ScVbi82AD5cZdly4UOEA4PH1PgWAgt6B6/n6jgq1gvDFtGH8KO4HgTgXFq7UFCSoEKdtypmpvXtCTXpfXi7PmBTnpdeUUCCoY5gV7dhMpCY3iCXEO+ZsVkaZmXkAryZHTpFO3siCkJ0RZUFgPVvMCWopbTQxe4NteUcRx/PaKOC68r4nVTKjjPgAMkeOTlHkK9RHQVO7n71nuB1apUU6AhZ8nJUiRciq0HAOTQJJ0TApLsmEuOUnMPxfovyYIkAKbP7o1/MJRF4TknFvKAntMEzVBPrZWaoJmugLUBNulgkywBHEyueM9rCgIyNU/gKoAInJIFwqMBYKaNGHS2ePP4D8JmF7TH7XzAgFcfM0L+VUZJ4DARJZ1e+m9UCqWdfWrrcY+n9DPsoOkgHmdJoCH/xZwQYIw0TgGfBj2/Ed+0ma1LqQ2u8cr7R2alVquL2OXZgAAAABJRU5ErkJggg==');
28+
}
29+
30+
.icon.private {
31+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAY1BMVEUAAAD/Vlb/Vlb/Vlb/Vlb/Vlb/Vlb/Vlb/Vlb/Vlb/Vlb/Vlb/Vlb/Vlb/Vlb/Vlb/Vlb/Vlb/Vlb/Vlb/Vlb/Vlb/Vlb/Vlb/Vlb/Vlb/Vlb/Vlb/Vlb/Vlb/Vlb/Vlb/VlZ3HkjAAAAAIHRSTlMA1jwvSvPdtyrOFI8m5TYKwXlW66RFIMasmImEcWB9Z9JQcSQAAAGUSURBVFjD7ZfRkoMgDEWlCghWEa1W29ry/1+5O2umzBaKAWeftvf1JmcgECPZe5XL5cQ5n2ZdyCxaUhNjRXkXma+peZEYItJHYTyq0Pk5NV5xZP4R4pMJNYSn7uJk4/v2NM+TMFYHRAHsggsFNb09F8W2AWcDemRW6rmszftQ2kjvxsgWoILAy6vRg5HjjoA6RgeAK66ElWvBEs5hwAMAzdvNUYUpQe+xOlQRpjWoDeyuCAL4GjR7LAmAJQhoPYcIUlDFW/geBs6KrZ4OAqBx7j6PADwZUGNauil+dAx6fyhZ5k1zCKvJ3y7hMFGDEqu8g+Zu8KKeIXFDZ/s7YjRx6t1vcaQWp1MixZ1ejZRwxlmkyP8BUIoDlP5snUvZVMmAelzNIhVQ2j5JAnBr0ySAtnabBLjuBYjwFhDNNNiRmwagMOQXkwgwDG7pTkD+AaQC7B9Zlw4wrfy2aq8lUABDCcF91su9c2GMBpC9o40hH0roB9glFjC8AJTBy//XP0Tl1ypzCdgywAVzpbRgZFuM/HrKfwF8nAYr+sEwcQAAAABJRU5ErkJggg==');
32+
}
33+
34+
.icon.menu {
35+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAG1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACUUeIgAAAACXRSTlMAs6oPr5OSXltCBKYlAAAAQElEQVRIx2MYBVQEzIqCWIGQAVQBhyAOUABVwIZLQQBUAQsuBQ6EFCgQtIKgIwl7cxSMpqjRFDWYwWiKGgXUAwAb1S3lcH3+zQAAAABJRU5ErkJggg==');
36+
}
37+
38+
.icon.back {
39+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAbFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB0Iv+qAAAAJHRSTlMAsyYFn1Ual4ASr6d5PTgvDHJfSzSOhVtQQWxiRiIXq5SIH6o2GUaoAAABG0lEQVRYw+3TyZKDIBSF4XsQAecxGjMn/f7v2GVT1W3HIKhbvhUbKO6t+snzPG+mDYN99wG564UEwImmBMuH5pjnLCIHBUYv0sr8pDh+cdUXtt89MTqMx1v4jDGTVDktKKG1lKUw4b15mCO0RGJJfL7RZxyO4t6wQncHRnMnrBHSu+ALq3Tvy8yw0r2lfyRWa2hCYIMz/Tlji2ra0SapZYV2NWkKdomqm5YJIV7FEKYPaEfdUQyLrrm+xSwu6udWpjtadGg+9xOFEgCzddQVZJZJoCQGs5TRsgs4pebPF2QVDGRpzg4mgtx0MODkJto9w1XBoCRHEbvUSsam3tyfGepU3jER0Holy/rqkWDEA9oquOZhVQvyPM9b4RvO5w0waSUV9QAAAABJRU5ErkJggg==');
1240
}

0 commit comments

Comments
 (0)