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 1 year 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 %} {% endblock %}
{% block stylesheets %} {% 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 %} {% endblock %}
{% block mainContent %} {% block mainContent %}
<div id="nav-index"> <article role="navigation">
<div id="nav-index-wrapper"> <section id="nav-items">
<div id="nav-pages"> {% for item in menu %}
{% for item in menu %} <div id="{{ item.id }}" class="nav-item" data-slug="{{ item.slug }}" data-uuid="{{ item.uuid }}" data-path="{{ item.path }}">
<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>
<svg id="item-arrows"> <label>{{ item.title }}</label>
<use xlink:href="/assets/images/global/sprite.svg#entypo-select-arrows"/> <div id="nav-btns">
</svg> <button id="edit-item" class="nav-btn" data-id="{{ item.uuid }}" title="edit page">
<label>{{ item.title }}</label> <i class="ti ti-edit"></i>
<div id="nav-btns"> </button>
<button id="edit-item" class="nav-btn" data-id="{{ item.uuid }}" title="edit page"> <button id="remove-item" class="nav-btn" data-uuid="{{ item.uuid }}" data-id="{{ item.id }}" title="delete from menu">
<svg> <i class="ti ti-x"></i>
<use xlink:href="/assets/images/global/sprite.svg#entypo-edit"/> </button>
</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>
</div> </div>
{% endfor %} </div>
</div> {% endfor %}
</div> </section>
</div> </article>
{% endblock %} {% endblock %}

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

@ -6,23 +6,17 @@
{% endif %} {% endif %}
<a id="settings" href="/dashboard/settings" title="settings"> <a id="settings" href="/dashboard/settings" title="settings">
<button> <button>
<svg role="icon"> <i class="ti ti-home-cog"></i>
<use xlink:href="/assets/images/global/sprite.svg#entypo-sound-mix"/>
</svg>
</button> </button>
</a> </a>
<a id="navigation" href="/dashboard/navigation" title="edit navigation"> <a id="navigation" href="/dashboard/navigation" title="edit navigation">
<button> <button>
<svg role="icon"> <i class="ti ti-menu-2"></i>
<use xlink:href="/assets/images/global/sprite.svg#entypo-list"/>
</svg>
</button> </button>
</a> </a>
<a id="navigation" href="/dashboard/logout" title="log out"> <a id="navigation" href="/dashboard/logout" title="log out">
<button> <button>
<svg role="icon"> <i class="ti ti-logout"></i>
<use xlink:href="/assets/images/global/sprite.svg#entypo-log-out"/>
</svg>
</button> </button>
</a> </a>
</div> </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; width: 40px;
height: 40px; height: 40px;
margin-left: 5px; margin-left: 5px;
font-size: 0.8em;
color: var(--white);
} }
header > nav > div[role="nav-right"] div[role="submenu"] { 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.css");
@import url("page-editor-highlights.css"); @import url("page-editor-highlights.css");
@import url("settings.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() { syncMenu() {
let navData = []; 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({ for(let index = 0; index < items.length; index++)navData.push({
title: items[index].getElementsByTagName("label")[0].innerHTML, title: items[index].getElementsByTagName("label")[0].innerHTML,
id: items[index].id, id: items[index].id,
@ -7499,7 +7499,7 @@ class $24d614592ba94b67$export$2e2bcd8739ae039 {
}); });
} }
removeItem(id) { 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() { start() {
//grabs elements and makes them sortables //grabs elements and makes them sortables
let self = this; let self = this;
(0, $64afbd09cd65a300$export$2e2bcd8739ae039).create(document.getElementById("nav-pages"), { (0, $64afbd09cd65a300$export$2e2bcd8739ae039).create(document.getElementById("nav-items"), {
onUpdate: ()=>{ onUpdate: ()=>{
new (0, $24d614592ba94b67$export$2e2bcd8739ae039)().syncMenu().then((data)=>{ new (0, $24d614592ba94b67$export$2e2bcd8739ae039)().syncMenu().then((data)=>{
$18c0afb4f3b7cd5c$var$notify.alert("Updating Menu", null); $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 { export default class NavActions {
//-------------------------- //--------------------------
// constructor // constructor
//-------------------------- //--------------------------
constructor() {} constructor() {}
//-------------------------- //--------------------------
// methods // methods
//-------------------------- //--------------------------
syncMenu() { syncMenu() {
let navData = []; let navData = [];
let items = document.getElementById("nav-pages").children; let items = document.getElementById('nav-items').children;
for (let index = 0; index < items.length; index++) { for (let index = 0; index < items.length; index++) {
navData.push({ navData.push({
title: items[index].getElementsByTagName("label")[0].innerHTML, title: items[index].getElementsByTagName('label')[0].innerHTML,
id: items[index].id, id: items[index].id,
slug: items[index].getAttribute("data-slug"), slug: items[index].getAttribute('data-slug'),
uuid: items[index].getAttribute("data-uuid"), uuid: items[index].getAttribute('data-uuid'),
path: items[index].getAttribute("data-path") path: items[index].getAttribute('data-path')
}); });
} }
let data = { menu: navData, remove: null }; let data = { menu: navData, remove: null };
return new Promise(function (resolve) { return new Promise(function (resolve) {
resolve(data); resolve(data);
}); });
} }
removeItem(id) { removeItem(id) {
document document.getElementById('nav-items').removeChild(document.getElementById(id));
.getElementById("nav-pages") }
.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() { start() {
//grabs elements and makes them sortables //grabs elements and makes them sortables
let self = this; let self = this;
Sortable.create(document.getElementById('nav-pages'), { Sortable.create(document.getElementById('nav-items'), {
onUpdate: () => { onUpdate: () => {
new NavActions().syncMenu().then(data => { new NavActions().syncMenu().then(data => {
notify.alert('Updating Menu', null); notify.alert('Updating Menu', null);

Write Preview
Loading…
Cancel
Save