are0h
/
Fipamo
1
2
Fork 0
Code Issues 19 Pull Requests 1 Packages Projects 1 Releases 22 Wiki Activity

Styled Nav Editor

Browse Source 
Created new CSS styles for dash nav editor and updated the appropriate
controller scripts.

Also updated the icons for the main nav.
toggle-buttons-#109
Ro 2 years ago
parent 1b89d1d072
commit 78bfe4596b
Signed by: are0h
GPG Key ID: 29B551CDBD4D3B50
8 changed files with 92 additions and 72 deletions
Show Stats Download Patch File Download Diff File

45
brain/views/dash/navigation.twig
Unescape Escape View File

@ -5,35 +5,26 @@
{% endblock %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=sdsdsds">
<link rel="stylesheet" type="text/css" href="/assets/css/dash/start.css?=sdsdsds">
{% endblock %}
{% block mainContent %}
<div id="nav-index">
<div id="nav-index-wrapper">
<div id="nav-pages">
{% for item in menu %}
<div id="{{ item.id }}" class="nav-item" data-slug="{{ item.slug }}" data-uuid="{{ item.uuid }}" data-path="{{ item.path }}">
<svg id="item-arrows">
<use xlink:href="/assets/images/global/sprite.svg#entypo-select-arrows"/>
</svg>
<label>{{ item.title }}</label>
<div id="nav-btns">
<button id="edit-item" class="nav-btn" data-id="{{ item.uuid }}" title="edit page">
<svg>
<use xlink:href="/assets/images/global/sprite.svg#entypo-edit"/>
</svg>
</button>
<button id="remove-item" class="nav-btn" data-uuid="{{ item.uuid }}" data-id="{{ item.id }}" title="delete from menu">
<svg>
<use xlink:href="/assets/images/global/sprite.svg#entypo-cross"/>
</svg>
</button>
</div>
<article role="navigation">
<section id="nav-items">
{% for item in menu %}
<div id="{{ item.id }}" class="nav-item" data-slug="{{ item.slug }}" data-uuid="{{ item.uuid }}" data-path="{{ item.path }}">
<i class="ti ti-arrows-move-vertical"></i>
<label>{{ item.title }}</label>
<div id="nav-btns">
<button id="edit-item" class="nav-btn" data-id="{{ item.uuid }}" title="edit page">
<i class="ti ti-edit"></i>
</button>
<button id="remove-item" class="nav-btn" data-uuid="{{ item.uuid }}" data-id="{{ item.id }}" title="delete from menu">
<i class="ti ti-x"></i>
</button>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% endfor %}
</section>
</article>
{% endblock %}

12
brain/views/dash/partials/navigation.twig
Unescape Escape View File

@ -6,23 +6,17 @@
{% endif %}
<a id="settings" href="/dashboard/settings" title="settings">
<button>
<svg role="icon">
<use xlink:href="/assets/images/global/sprite.svg#entypo-sound-mix"/>
</svg>
<i class="ti ti-home-cog"></i>
</button>
</a>
<a id="navigation" href="/dashboard/navigation" title="edit navigation">
<button>
<svg role="icon">
<use xlink:href="/assets/images/global/sprite.svg#entypo-list"/>
</svg>
<i class="ti ti-menu-2"></i>
</button>
</a>
<a id="navigation" href="/dashboard/logout" title="log out">
<button>
<svg role="icon">
<use xlink:href="/assets/images/global/sprite.svg#entypo-log-out"/>
</svg>
<i class="ti ti-logout"></i>
</button>
</a>
</div>

2
public/assets/css/dash/frame.css
Unescape Escape View File

@ -88,6 +88,8 @@ header > nav > div[role="nav-right"] button {
width: 40px;
height: 40px;
margin-left: 5px;
font-size: 0.8em;
color: var(--white);
}
header > nav > div[role="nav-right"] div[role="submenu"] {

34
public/assets/css/dash/navigation.css
Unescape Escape View File

@ -0,0 +1,34 @@
article[role="navigation"] {
width: 100%;
max-width: 900px;
margin: 100px auto;
}
article[role="navigation"] > section > div.nav-item {
display: block;
width: 98%;
background: var(--white);
border-radius: 3px;
color: var(--highlight);
margin: 0 0 10px;
font-size: 1.5em;
cursor: move;
}
article[role="navigation"] > section > div.nav-item > label {
display: inline-block;
padding: 5px;
margin: 12px 0 0 10px;
vertical-align: top;
cursor: move;
}
article[role="navigation"] > section > div.nav-item > div#nav-btns {
float: right;
padding: 5px;
position: relative;
}
article[role="navigation"] > section > div.nav-item > div#nav-btns button {
margin-left: 5px;
}

1
public/assets/css/dash/start.css
Unescape Escape View File

@ -9,3 +9,4 @@
@import url("page-editor.css");
@import url("page-editor-highlights.css");
@import url("settings.css");
@import url("navigation.css");

6
public/assets/scripts/Start.js
Unescape Escape View File

@ -7482,7 +7482,7 @@ class $24d614592ba94b67$export$2e2bcd8739ae039 {
//--------------------------
syncMenu() {
let navData = [];
let items = document.getElementById("nav-pages").children;
let items = document.getElementById("nav-items").children;
for(let index = 0; index < items.length; index++)navData.push({
title: items[index].getElementsByTagName("label")[0].innerHTML,
id: items[index].id,
@ -7499,7 +7499,7 @@ class $24d614592ba94b67$export$2e2bcd8739ae039 {
});
}
removeItem(id) {
document.getElementById("nav-pages").removeChild(document.getElementById(id));
document.getElementById("nav-items").removeChild(document.getElementById(id));
}
}
@ -7523,7 +7523,7 @@ class $18c0afb4f3b7cd5c$export$2e2bcd8739ae039 {
start() {
//grabs elements and makes them sortables
let self = this;
(0, $64afbd09cd65a300$export$2e2bcd8739ae039).create(document.getElementById("nav-pages"), {
(0, $64afbd09cd65a300$export$2e2bcd8739ae039).create(document.getElementById("nav-items"), {
onUpdate: ()=>{
new (0, $24d614592ba94b67$export$2e2bcd8739ae039)().syncMenu().then((data)=>{
$18c0afb4f3b7cd5c$var$notify.alert("Updating Menu", null);

62
src/com/actions/NavActions.js
Unescape Escape View File

@ -1,37 +1,35 @@
export default class NavActions {
//--------------------------
// constructor
//--------------------------
constructor() {}
//--------------------------
// methods
//--------------------------
syncMenu() {
let navData = [];
let items = document.getElementById("nav-pages").children;
for (let index = 0; index < items.length; index++) {
navData.push({
title: items[index].getElementsByTagName("label")[0].innerHTML,
id: items[index].id,
slug: items[index].getAttribute("data-slug"),
uuid: items[index].getAttribute("data-uuid"),
path: items[index].getAttribute("data-path")
});
}
//--------------------------
// constructor
//--------------------------
constructor() {}
//--------------------------
// methods
//--------------------------
syncMenu() {
let navData = [];
let items = document.getElementById('nav-items').children;
for (let index = 0; index < items.length; index++) {
navData.push({
title: items[index].getElementsByTagName('label')[0].innerHTML,
id: items[index].id,
slug: items[index].getAttribute('data-slug'),
uuid: items[index].getAttribute('data-uuid'),
path: items[index].getAttribute('data-path')
});
}
let data = { menu: navData, remove: null };
return new Promise(function (resolve) {
resolve(data);
});
}
let data = { menu: navData, remove: null };
return new Promise(function (resolve) {
resolve(data);
});
}
removeItem(id) {
document
.getElementById("nav-pages")
.removeChild(document.getElementById(id));
}
removeItem(id) {
document.getElementById('nav-items').removeChild(document.getElementById(id));
}
//--------------------------
// event handlers
//--------------------------
//--------------------------
// event handlers
//--------------------------
}

2
src/com/controllers/NavIndex.js
Unescape Escape View File

@ -20,7 +20,7 @@ export default class NavIndex {
start() {
//grabs elements and makes them sortables
let self = this;
Sortable.create(document.getElementById('nav-pages'), {
Sortable.create(document.getElementById('nav-items'), {
onUpdate: () => {
new NavActions().syncMenu().then(data => {
notify.alert('Updating Menu', null);

Write Preview
Loading…
Cancel
Save