Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2026-03-12 23:50:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: navigation

Browse Source
This commit is contained in:
Barış Soner Uşaklı
2022-09-02 12:26:38 -04:00
parent 75494011e1
commit 8cf64ff9ce
7 changed files with 87 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/language/en-GB/admin/settings/navigation.json
View File

@@ -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: <br/>&lt;li&gt;&lt;a href&#x3D;&quot;https://myforum.com&quot;&gt;Link 1&lt;/a&gt;&lt;/li&gt;",
"dropdown-placeholder": "Place your dropdown menu items below, ie: <br/>&lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href&#x3D;&quot;https://myforum.com&quot;&gt;Link 1&lt;/a&gt;&lt;/li&gt;",
"btn.delete": "Delete",
"btn.disable": "Disable",

17
public/scss/admin/admin.scss
View File

@@ -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;
}

4
public/scss/admin/general/navigation.scss
View File

@@ -24,6 +24,10 @@
li {
display: inline-block;
>a:hover, >a:focus {
color: $gray-300;
background-color: $gray-700;
}
}
}

2
public/scss/admin/header.scss
View File

@@ -131,7 +131,7 @@
list-style-type: none;
padding: 0px;
position: absolute;
bottom: -11px;
bottom: -16px;
left: 50px;
> li {

2
public/scss/admin/vars.scss
View File

@@ -20,4 +20,4 @@ $font-family-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", R
$font-family-sans-serif: font-family-system;
$light: #e9ecef;
$light: #f5f5f5;

44
public/src/admin/settings/navigation.js
View File

@@ -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() {

106
src/views/admin/settings/navigation.tpl
View File

@@ -1,10 +1,10 @@
<div class="row" id="navigation">
<div class="col-lg-9">
<div class="clearfix">
<ul id="active-navigation" class="nav navbar-nav">
<ul id="active-navigation" class="nav">
<!-- BEGIN navigation -->
<li data-index="{navigation.index}" class="{navigation.class} {{{ if navigation.selected }}} active {{{ end }}}">
<a href="#" title="{navigation.route}" id="{navigation.id}" class="{{{ if !navigation.enabled }}}text-muted{{{ end }}}">
<li data-index="{navigation.index}" class="float-start nav-item {navigation.class} {{{ if navigation.selected }}} active {{{ end }}}">
<a href="#" title="{navigation.route}" id="{navigation.id}" class="nav-link p-3 {{{ if !navigation.enabled }}}text-muted{{{ end }}}">
<i class="nav-icon fa fa-fw {{{ if navigation.iconClass }}}{navigation.iconClass}{{{ end }}}"></i><i class="dropdown-icon fa fa-caret-down{{{ if !navigation.dropdown }}} hidden{{{ end }}}"></i>
</a>
</li>
@@ -16,10 +16,10 @@
<ul id="enabled">
{{{ each enabled }}}
<li data-index="{enabled.index}" class="well <!-- IF !enabled.selected -->hidden<!-- ENDIF !enabled.selected -->">
<li data-index="{enabled.index}" class="card card-body text-bg-light border-0 <!-- IF !enabled.selected -->hidden<!-- ENDIF !enabled.selected -->">
<form>
<div class="row">
<div class="col-sm-12 text-right">
<div class="col-sm-12 text-end">
{{{ if enabled.enabled }}}
<button class="btn btn-warning toggle">[[admin/settings/navigation:btn.disable]]</button>
{{{ else }}}
@@ -29,68 +29,58 @@
<input type="hidden" name="enabled" value="{{{ if enabled.enabled }}}on{{{ end}}}" />
</div>
</div>
<div class="row">
<div class="row mb-3">
<div class="col-sm-1">
<div class="form-group">
<label>[[admin/settings/navigation:icon]]</label>
<br/>
<span class="iconPicker"><i class="fa fa-2x {enabled.iconClass}"></i>
<a class="change-icon-link <!-- IF enabled.iconClass -->hidden<!-- ENDIF enabled.iconClass -->" href="#">[[admin/settings/navigation:change-icon]]</a>
<input class="form-control" type="hidden" name="iconClass" value="{enabled.iconClass}" />
</span>
</div>
<label class="form-label">[[admin/settings/navigation:icon]]</label>
<span class="iconPicker"><i class="fa fa-2x {enabled.iconClass}"></i>
<a class="change-icon-link <!-- IF enabled.iconClass -->hidden<!-- ENDIF enabled.iconClass -->" href="#">[[admin/settings/navigation:change-icon]]</a>
<input class="form-control" type="hidden" name="iconClass" value="{enabled.iconClass}" />
</span>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="nav:route">[[admin/settings/navigation:route]]</label>
<input id="nav:route" class="form-control" type="text" name="route" value="{enabled.route}" />
</div>
<label class="form-label" for="nav:route">[[admin/settings/navigation:route]]</label>
<input id="nav:route" class="form-control" type="text" name="route" value="{enabled.route}" />
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="nav:class">[[admin/settings/navigation:class]]</label>
<input id="nav:class" class="form-control" type="text" name="class" value="{enabled.class}" />
</div>
<label class="form-label" for="nav:class">[[admin/settings/navigation:class]]</label>
<input id="nav:class" class="form-control" type="text" name="class" value="{enabled.class}" />
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="nav:id">[[admin/settings/navigation:id]]</label>
<input id="nav:id" class="form-control" type="text" name="id" value="{enabled.id}" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="nav:text">[[admin/settings/navigation:text]]</label>
<input id="nav:text" class="form-control unescape" type="text" name="text" value="{enabled.text}" />
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="nav:text-class">[[admin/settings/navigation:text-class]]</label>
<input id="nav:text-class" class="form-control" type="text" name="textClass" value="{enabled.textClass}" />
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="nav:tooltip">[[admin/settings/navigation:tooltip]]</label>
<input id="nav:tooltip" class="form-control unescape" type="text" name="title" value="{enabled.title}" />
</div>
<label class="form-label" for="nav:id">[[admin/settings/navigation:id]]</label>
<input id="nav:id" class="form-control" type="text" name="id" value="{enabled.id}" />
</div>
</div>
<strong>[[admin/settings/navigation:groups]]</strong>
<div>
<select name="groups" class="form-control" size="10" multiple>
{{{ each enabled.groups }}}
<option value="{enabled.groups.displayName}"<!-- IF enabled.groups.selected --> selected<!-- ENDIF enabled.groups.selected -->>{enabled.groups.displayName}</option>
{{{ end }}}
</select>
<div class="row mb-3">
<div class="col-sm-4">
<label class="form-label" for="nav:text">[[admin/settings/navigation:text]]</label>
<input id="nav:text" class="form-control unescape" type="text" name="text" value="{enabled.text}" />
</div>
<div class="col-sm-4">
<label class="form-label" for="nav:text-class">[[admin/settings/navigation:text-class]]</label>
<input id="nav:text-class" class="form-control" type="text" name="textClass" value="{enabled.textClass}" />
</div>
<div class="col-sm-4">
<label class="form-label" for="nav:tooltip">[[admin/settings/navigation:tooltip]]</label>
<input id="nav:tooltip" class="form-control unescape" type="text" name="title" value="{enabled.title}" />
</div>
</div>
<div class="row mb-3">
<div class="col-12">
<label class="form-label">[[admin/settings/navigation:groups]]</label>
<select name="groups" class="form-select" size="10" multiple>
{{{ each enabled.groups }}}
<option value="{enabled.groups.displayName}"<!-- IF enabled.groups.selected --> selected<!-- ENDIF enabled.groups.selected -->>{enabled.groups.displayName}</option>
{{{ end }}}
</select>
</div>
</div>
<div class="checkbox">
@@ -107,7 +97,7 @@
</label>
</div>
<div>
<p class="help-block">
<p class="form-text">
[[admin/settings/navigation:dropdown-placeholder]]
</p>
<textarea name="dropdownContent" rows="5" class="form-control">{enabled.dropdownContent}</textarea>
@@ -119,9 +109,9 @@
</div>
<div class="col-lg-3">
<div class="panel panel-default">
<div class="panel-heading">[[admin/settings/navigation:available-menu-items]]</div>
<div class="panel-body">
<div class="card">
<div class="card-header">[[admin/settings/navigation:available-menu-items]]</div>
<div class="card-body">
<ul id="available">
<li data-id="custom" class="clearfix">
<div data-id="custom" class="drag-item alert alert-success pull-left">