apitech
/
wekan
mirror of https://github.com/wekan/wekan
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Change Admin Panel "Attachment Settings" and "Cron Settings" options to be tabs, not submenu.

Browse Source 
Thanks to xet7 !
pull/5953/head
Lauri Ojansivu 3 months ago
parent 0e3a17d922
commit ae2aa1f5cd
7 changed files with 200 additions and 135 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 3
      client/00-startup.js
  2. 32
      client/components/settings/attachmentSettings.jade
  3. 40
      client/components/settings/cronSettings.jade
  4. 21
      client/components/settings/cronSettings.js
  5. 125
      client/components/settings/settingBody.jade
  6. 47
      client/components/settings/settingBody.js
  7. 67
      client/components/settings/settingsTabs.css

3
client/00-startup.js
Unescape View File

@ -15,3 +15,6 @@ import '/client/components/migrationProgress';
// Import cron settings
import '/client/components/settings/cronSettings';
// Import settings tabs CSS
import '/client/components/settings/settingsTabs.css';

32
client/components/settings/attachmentSettings.jade
Unescape View File

@ -1,13 +1,29 @@
template(name="attachmentSettings")
.attachment-settings-content
if loading.get
+spinner
else if showStorageSettings.get
+storageSettings
else if showMigration.get
+attachmentMigration
else if showMonitoring.get
+attachmentMonitoring
.settings-tabs
ul.tab-nav
li(class="{{#if showStorageSettings.get}}active{{/if}}")
a.js-attachment-storage-settings(data-id="storage-settings")
i.fa.fa-cog
| {{_ 'attachment-storage-settings'}}
li(class="{{#if showMigration.get}}active{{/if}}")
a.js-attachment-migration(data-id="attachment-migration")
i.fa.fa-arrow-right
| {{_ 'attachment-migration'}}
li(class="{{#if showMonitoring.get}}active{{/if}}")
a.js-attachment-monitoring(data-id="attachment-monitoring")
i.fa.fa-chart-line
| {{_ 'attachment-monitoring'}}
.tab-content
if loading.get
+spinner
else if showStorageSettings.get
+storageSettings
else if showMigration.get
+attachmentMigration
else if showMonitoring.get
+attachmentMonitoring
template(name="storageSettings")
.storage-settings

40
client/components/settings/cronSettings.jade
Unescape View File

@ -1,15 +1,35 @@
template(name="cronSettings")
.cron-settings-content
if loading.get
+spinner
else if showMigrations.get
+cronMigrations
else if showBoardOperations.get
+cronBoardOperations
else if showJobs.get
+cronJobs
else if showAddJob.get
+cronAddJob
.settings-tabs
ul.tab-nav
li(class="{{#if showMigrations.get}}active{{/if}}")
a.js-cron-migrations(data-id="cron-migrations")
i.fa.fa-database
| {{_ 'cron-migrations'}}
li(class="{{#if showBoardOperations.get}}active{{/if}}")
a.js-cron-board-operations(data-id="cron-board-operations")
i.fa.fa-tasks
| {{_ 'board-operations'}}
li(class="{{#if showJobs.get}}active{{/if}}")
a.js-cron-jobs(data-id="cron-jobs")
i.fa.fa-clock-o
| {{_ 'cron-jobs'}}
li(class="{{#if showAddJob.get}}active{{/if}}")
a.js-cron-add(data-id="cron-add")
i.fa.fa-plus
| {{_ 'add-cron-job'}}
.tab-content
if loading.get
+spinner
else if showMigrations.get
+cronMigrations
else if showBoardOperations.get
+cronBoardOperations
else if showJobs.get
+cronJobs
else if showAddJob.get
+cronAddJob
template(name="cronMigrations")
.cron-migrations

21
client/components/settings/cronSettings.js
Unescape View File

@ -141,6 +141,27 @@ Template.cronSettings.helpers({
}
});
Template.cronSettings.switchMenu = function(event, targetID) {
const instance = Template.instance();
// Reset all tabs
instance.showMigrations.set(false);
instance.showBoardOperations.set(false);
instance.showJobs.set(false);
instance.showAddJob.set(false);
// Set the selected tab
if (targetID === 'cron-migrations') {
instance.showMigrations.set(true);
} else if (targetID === 'cron-board-operations') {
instance.showBoardOperations.set(true);
} else if (targetID === 'cron-jobs') {
instance.showJobs.set(true);
} else if (targetID === 'cron-add') {
instance.showAddJob.set(true);
}
};
Template.cronSettings.events({
'click .js-cron-migrations'(event) {
event.preventDefault();

125
client/components/settings/settingBody.jade
Unescape View File

@ -8,89 +8,48 @@ template(name="setting")
span {{_ 'settings'}}
.content-body
.side-menu
if attachmentSettings.get
ul
li
a.js-back-to-main-settings
i.fa.fa-arrow-left
| {{_ 'back-to-settings'}}
li
a.js-attachment-storage-settings(data-id="storage-settings")
i.fa.fa-cog
| {{_ 'attachment-storage-settings'}}
li
a.js-attachment-migration(data-id="attachment-migration")
i.fa.fa-arrow-right
| {{_ 'attachment-migration'}}
li
a.js-attachment-monitoring(data-id="attachment-monitoring")
i.fa.fa-chart-line
| {{_ 'attachment-monitoring'}}
else if cronSettings.get
ul
li
a.js-back-to-main-settings
i.fa.fa-arrow-left
| {{_ 'back-to-settings'}}
li
a.js-cron-migrations(data-id="cron-migrations")
i.fa.fa-database
| {{_ 'cron-migrations'}}
li
a.js-cron-board-operations(data-id="cron-board-operations")
i.fa.fa-tasks
| {{_ 'board-operations'}}
li
a.js-cron-jobs(data-id="cron-jobs")
i.fa.fa-clock-o
| {{_ 'cron-jobs'}}
li
a.js-cron-add(data-id="cron-add")
i.fa.fa-plus
| {{_ 'add-cron-job'}}
else
ul
li.active
a.js-setting-menu(data-id="registration-setting")
i.fa.fa-sign-in
| {{_ 'registration'}}
unless isSandstorm
li
a.js-setting-menu(data-id="email-setting")
i.fa.fa-envelope
| {{_ 'email'}}
li
a.js-setting-menu(data-id="account-setting")
i.fa.fa-users
| {{_ 'accounts'}}
li
a.js-setting-menu(data-id="tableVisibilityMode-setting")
i.fa.fa-eye
| {{_ 'tableVisibilityMode'}}
li
a.js-setting-menu(data-id="announcement-setting")
i.fa.fa-bullhorn
| {{_ 'admin-announcement'}}
li
a.js-setting-menu(data-id="accessibility-setting")
i.fa.fa-universal-access
| {{_ 'accessibility'}}
li
a.js-setting-menu(data-id="layout-setting")
i.fa.fa-object-group
| {{_ 'layout'}}
li
a.js-setting-menu(data-id="webhook-setting")
i.fa.fa-globe
| {{_ 'global-webhook'}}
li
a.js-setting-menu(data-id="attachment-settings")
i.fa.fa-paperclip
| {{_ 'attachment-settings'}}
li
a.js-setting-menu(data-id="cron-settings")
i.fa.fa-clock-o
| {{_ 'cron-settings'}}
ul
li(class="{{#if generalSetting.get}}active{{/if}}")
a.js-setting-menu(data-id="registration-setting")
i.fa.fa-sign-in
| {{_ 'registration'}}
unless isSandstorm
li(class="{{#if emailSetting.get}}active{{/if}}")
a.js-setting-menu(data-id="email-setting")
i.fa.fa-envelope
| {{_ 'email'}}
li(class="{{#if accountSetting.get}}active{{/if}}")
a.js-setting-menu(data-id="account-setting")
i.fa.fa-users
| {{_ 'accounts'}}
li(class="{{#if tableVisibilityModeSetting.get}}active{{/if}}")
a.js-setting-menu(data-id="tableVisibilityMode-setting")
i.fa.fa-eye
| {{_ 'tableVisibilityMode'}}
li(class="{{#if announcementSetting.get}}active{{/if}}")
a.js-setting-menu(data-id="announcement-setting")
i.fa.fa-bullhorn
| {{_ 'admin-announcement'}}
li(class="{{#if accessibilitySetting.get}}active{{/if}}")
a.js-setting-menu(data-id="accessibility-setting")
i.fa.fa-universal-access
| {{_ 'accessibility'}}
li(class="{{#if layoutSetting.get}}active{{/if}}")
a.js-setting-menu(data-id="layout-setting")
i.fa.fa-object-group
| {{_ 'layout'}}
li(class="{{#if webhookSetting.get}}active{{/if}}")
a.js-setting-menu(data-id="webhook-setting")
i.fa.fa-globe
| {{_ 'global-webhook'}}
li(class="{{#if attachmentSettings.get}}active{{/if}}")
a.js-setting-menu(data-id="attachment-settings")
i.fa.fa-paperclip
| {{_ 'attachment-settings'}}
li(class="{{#if cronSettings.get}}active{{/if}}")
a.js-setting-menu(data-id="cron-settings")
i.fa.fa-clock-o
| {{_ 'cron-settings'}}
.main-body
if loading.get
+spinner

47
client/components/settings/settingBody.js
Unescape View File

@ -102,33 +102,13 @@ BlazeComponent.extendComponent({
$('#display-authentication-method').toggleClass('is-checked');
},
backToMainSettings(event) {
event.preventDefault();
// Reset all settings to false
this.forgotPasswordSetting.set(false);
this.generalSetting.set(true); // Set registration as default
this.emailSetting.set(false);
this.accountSetting.set(false);
this.announcementSetting.set(false);
this.accessibilitySetting.set(false);
this.layoutSetting.set(false);
this.webhookSetting.set(false);
this.attachmentSettings.set(false);
this.cronSettings.set(false);
this.tableVisibilityModeSetting.set(false);
// Update active menu item
$('.side-menu li.active').removeClass('active');
$('.side-menu li:first-child').addClass('active');
},
switchAttachmentMenu(event) {
switchAttachmentTab(event) {
event.preventDefault();
const target = $(event.target);
const targetID = target.data('id');
// Update active menu item
$('.side-menu li.active').removeClass('active');
// Update active tab
$('.tab-nav li.active').removeClass('active');
target.parent().addClass('active');
// Call the attachment settings component method if available
@ -137,13 +117,13 @@ BlazeComponent.extendComponent({
}
},
switchCronMenu(event) {
switchCronTab(event) {
event.preventDefault();
const target = $(event.target);
const targetID = target.data('id');
// Update active menu item
$('.side-menu li.active').removeClass('active');
// Update active tab
$('.tab-nav li.active').removeClass('active');
target.parent().addClass('active');
// Call the cron settings template method if available
@ -355,14 +335,13 @@ BlazeComponent.extendComponent({
'click button.js-save-layout': this.saveLayout,
'click a.js-toggle-display-authentication-method': this
.toggleDisplayAuthenticationMethod,
'click a.js-back-to-main-settings': this.backToMainSettings,
'click a.js-attachment-storage-settings': this.switchAttachmentMenu,
'click a.js-attachment-migration': this.switchAttachmentMenu,
'click a.js-attachment-monitoring': this.switchAttachmentMenu,
'click a.js-cron-migrations': this.switchCronMenu,
'click a.js-cron-board-operations': this.switchCronMenu,
'click a.js-cron-jobs': this.switchCronMenu,
'click a.js-cron-add': this.switchCronMenu,
'click a.js-attachment-storage-settings': this.switchAttachmentTab,
'click a.js-attachment-migration': this.switchAttachmentTab,
'click a.js-attachment-monitoring': this.switchAttachmentTab,
'click a.js-cron-migrations': this.switchCronTab,
'click a.js-cron-board-operations': this.switchCronTab,
'click a.js-cron-jobs': this.switchCronTab,
'click a.js-cron-add': this.switchCronTab,
},
];
},

67
client/components/settings/settingsTabs.css
Unescape View File

@ -0,0 +1,67 @@
/* Settings Tabs Styles */
.settings-tabs {
margin-bottom: 20px;
border-bottom: 1px solid #e0e0e0;
}
.tab-nav {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.tab-nav li {
margin: 0;
padding: 0;
}
.tab-nav li a {
display: block;
padding: 12px 20px;
text-decoration: none;
color: #666;
border-bottom: 3px solid transparent;
transition: all 0.3s ease;
font-weight: 500;
}
.tab-nav li a:hover {
color: #333;
background-color: #f5f5f5;
}
.tab-nav li.active a {
color: #2196F3;
border-bottom-color: #2196F3;
background-color: #f8f9fa;
}
.tab-nav li a i {
margin-right: 8px;
width: 16px;
text-align: center;
}
.tab-content {
padding: 20px 0;
min-height: 400px;
}
/* Responsive design */
@media (max-width: 768px) {
.tab-nav {
flex-direction: column;
}
.tab-nav li a {
border-bottom: 1px solid #e0e0e0;
border-right: none;
}
.tab-nav li.active a {
border-bottom-color: #2196F3;
border-right: 3px solid #2196F3;
}
}
Write Preview
Loading…
Cancel
Save