From 8cf64ff9cea7b093378971ee8e11419bc3b22c7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?= Date: Fri, 2 Sep 2022 12:26:38 -0400 Subject: [PATCH] feat: navigation --- .../en-GB/admin/settings/navigation.json | 2 +- public/scss/admin/admin.scss | 17 +-- public/scss/admin/general/navigation.scss | 4 + public/scss/admin/header.scss | 2 +- public/scss/admin/vars.scss | 2 +- public/src/admin/settings/navigation.js | 44 +++++--- src/views/admin/settings/navigation.tpl | 106 ++++++++---------- 7 files changed, 87 insertions(+), 90 deletions(-) diff --git a/public/language/en-GB/admin/settings/navigation.json b/public/language/en-GB/admin/settings/navigation.json index 7baca85096..32b2722074 100644 --- a/public/language/en-GB/admin/settings/navigation.json +++ b/public/language/en-GB/admin/settings/navigation.json @@ -12,7 +12,7 @@ "groups": "Groups:", "open-new-window": "Open in a new window", "dropdown": "Dropdown", - "dropdown-placeholder": "Place your dropdown menu items below, ie:
<li><a href="https://myforum.com">Link 1</a></li>", + "dropdown-placeholder": "Place your dropdown menu items below, ie:
<li><a class="dropdown-item" href="https://myforum.com">Link 1</a></li>", "btn.delete": "Delete", "btn.disable": "Disable", diff --git a/public/scss/admin/admin.scss b/public/scss/admin/admin.scss index b978990f8b..05df1f8df5 100644 --- a/public/scss/admin/admin.scss +++ b/public/scss/admin/admin.scss @@ -106,7 +106,7 @@ body { @include box-header-font; } - .dashboard .card:not([data-container-html]) { + .card:not([data-container-html]) { background-color: #FFF; box-sizing: border-box; border-radius: 3px; @@ -158,20 +158,7 @@ body { } .navbar-nav { - margin-top: 0; - margin-bottom: 0; - - >li { - >a { - padding-top: 15px; - padding-bottom: 15px; - } - - >a:hover, >a:focus { - color: $gray-300; - background-color: $gray-700; - } - + >li { >#reconnect { color: $gray-700; } diff --git a/public/scss/admin/general/navigation.scss b/public/scss/admin/general/navigation.scss index 9d0316ee3a..ada36aeeea 100644 --- a/public/scss/admin/general/navigation.scss +++ b/public/scss/admin/general/navigation.scss @@ -24,6 +24,10 @@ li { display: inline-block; + >a:hover, >a:focus { + color: $gray-300; + background-color: $gray-700; + } } } diff --git a/public/scss/admin/header.scss b/public/scss/admin/header.scss index b331d6a2a3..7aa0c9a212 100644 --- a/public/scss/admin/header.scss +++ b/public/scss/admin/header.scss @@ -131,7 +131,7 @@ list-style-type: none; padding: 0px; position: absolute; - bottom: -11px; + bottom: -16px; left: 50px; > li { diff --git a/public/scss/admin/vars.scss b/public/scss/admin/vars.scss index 6b7a5a4c3a..b37e4041a7 100644 --- a/public/scss/admin/vars.scss +++ b/public/scss/admin/vars.scss @@ -20,4 +20,4 @@ $font-family-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", R $font-family-sans-serif: font-family-system; -$light: #e9ecef; \ No newline at end of file +$light: #f5f5f5; \ No newline at end of file diff --git a/public/src/admin/settings/navigation.js b/public/src/admin/settings/navigation.js index fe54beb2a4..7709acf855 100644 --- a/public/src/admin/settings/navigation.js +++ b/public/src/admin/settings/navigation.js @@ -55,16 +55,20 @@ define('admin/settings/navigation', [ function onSelect() { const clickedIndex = $(this).attr('data-index'); - $('#active-navigation li').removeClass('active'); - $(this).addClass('active'); + selectIndex(clickedIndex); + return false; + } - const detailsForm = $('#enabled').children('[data-index="' + clickedIndex + '"]'); + function selectIndex(index) { + $('#active-navigation li').removeClass('active'); + $('#active-navigation [data-index="' + index + '"]').addClass('active'); + + const detailsForm = $('#enabled').children('[data-index="' + index + '"]'); $('#enabled li').addClass('hidden'); if (detailsForm.length) { detailsForm.removeClass('hidden'); } - return false; } function drop(ev, ui) { @@ -80,20 +84,32 @@ define('admin/settings/navigation', [ data.title = translator.escape(data.title); data.text = translator.escape(data.text); data.groups = ajaxify.data.groups; - Benchpress.parse('admin/settings/navigation', 'navigation', { navigation: [data] }, function (li) { - translator.translate(li, function (li) { - li = $(translator.unescape(li)); - el.after(li); - el.remove(); + + const renderNav = new Promise((resolve) => { + Benchpress.parse('admin/settings/navigation', 'navigation', { navigation: [data] }, function (li) { + translator.translate(li, function (li) { + li = $(translator.unescape(li)); + el.after(li); + el.remove(); + resolve(); + }); }); }); - Benchpress.parse('admin/settings/navigation', 'enabled', { enabled: [data] }, function (li) { - translator.translate(li, function (li) { - li = $(translator.unescape(li)); - $('#enabled').append(li); - componentHandler.upgradeDom(); + const renderForm = new Promise((resolve) => { + Benchpress.parse('admin/settings/navigation', 'enabled', { enabled: [data] }, function (li) { + translator.translate(li, function (li) { + li = $(translator.unescape(li)); + $('#enabled').append(li); + componentHandler.upgradeDom(); + resolve(); + }); }); }); + + Promise.all([ + renderNav, + renderForm, + ]).then(() => selectIndex(data.index)); } function save() { diff --git a/src/views/admin/settings/navigation.tpl b/src/views/admin/settings/navigation.tpl index ff76b337e5..99e0114b78 100644 --- a/src/views/admin/settings/navigation.tpl +++ b/src/views/admin/settings/navigation.tpl @@ -1,10 +1,10 @@