Andreas/wekan
1
0
Fork 0
mirror of https://github.com/wekan/wekan.git synced 2025-12-17 07:50:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

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

Browse source 
Thanks to xet7 !
This commit is contained in:
Lauri Ojansivu 2025-10-12 04:50:17 +03:00
parent 0e3a17d922
commit ae2aa1f5cd
7 changed files with 200 additions and 135 deletions
Download patch file Download diff file Expand all files Collapse all files

3
client/00-startup.js
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';

16
client/components/settings/attachmentSettings.jade
View file

@ -1,5 +1,21 @@
template(name="attachmentSettings")
.attachment-settings-content
.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

20
client/components/settings/cronSettings.jade
View file

@ -1,5 +1,25 @@
template(name="cronSettings")
.cron-settings-content
.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

21
client/components/settings/cronSettings.js
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();

61
client/components/settings/settingBody.jade
View file

@ -8,86 +8,45 @@ 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
li(class="{{#if generalSetting.get}}active{{/if}}")
a.js-setting-menu(data-id="registration-setting")
i.fa.fa-sign-in
| {{_ 'registration'}}
unless isSandstorm
li
li(class="{{#if emailSetting.get}}active{{/if}}")
a.js-setting-menu(data-id="email-setting")
i.fa.fa-envelope
| {{_ 'email'}}
li
li(class="{{#if accountSetting.get}}active{{/if}}")
a.js-setting-menu(data-id="account-setting")
i.fa.fa-users
| {{_ 'accounts'}}
li
li(class="{{#if tableVisibilityModeSetting.get}}active{{/if}}")
a.js-setting-menu(data-id="tableVisibilityMode-setting")
i.fa.fa-eye
| {{_ 'tableVisibilityMode'}}
li
li(class="{{#if announcementSetting.get}}active{{/if}}")
a.js-setting-menu(data-id="announcement-setting")
i.fa.fa-bullhorn
| {{_ 'admin-announcement'}}
li
li(class="{{#if accessibilitySetting.get}}active{{/if}}")
a.js-setting-menu(data-id="accessibility-setting")
i.fa.fa-universal-access
| {{_ 'accessibility'}}
li
li(class="{{#if layoutSetting.get}}active{{/if}}")
a.js-setting-menu(data-id="layout-setting")
i.fa.fa-object-group
| {{_ 'layout'}}
li
li(class="{{#if webhookSetting.get}}active{{/if}}")
a.js-setting-menu(data-id="webhook-setting")
i.fa.fa-globe
| {{_ 'global-webhook'}}
li
li(class="{{#if attachmentSettings.get}}active{{/if}}")
a.js-setting-menu(data-id="attachment-settings")
i.fa.fa-paperclip
| {{_ 'attachment-settings'}}
li
li(class="{{#if cronSettings.get}}active{{/if}}")
a.js-setting-menu(data-id="cron-settings")
i.fa.fa-clock-o
| {{_ 'cron-settings'}}

47
client/components/settings/settingBody.js
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 Normal file
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;
}
}