improve settings components and scss
This commit is contained in:
parent
c8194a4dcc
commit
009a5ed024
GPG key ID:
579388D585F70417
5 changed files with 62 additions and 72 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="side-menu-setting-save">
|
||||
<div class="cm-settings-btn cm-settings-btn--save">
|
||||
<NcButton
|
||||
variant="success"
|
||||
@click="save"
|
||||
|
|
|
|||
|
|
@ -15,7 +15,20 @@ You should have received a copy of the GNU Affero General Public License
|
|||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
-->
|
||||
<template>
|
||||
<div class="cs-settings-section">
|
||||
<div
|
||||
class="cm-settings-section"
|
||||
:class="{'cm-settings-section--hidden': hidden}"
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
hidden: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="side-menu-setting-save">
|
||||
<div class="cm-settings-btn cm-settings-btn--save">
|
||||
<NcButton
|
||||
variant="success"
|
||||
@click="save"
|
||||
|
|
|
|||
|
|
@ -26,11 +26,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
:name="item.label"
|
||||
:active="item.section === section"
|
||||
@click="setSection(item.section)"
|
||||
>
|
||||
</NcAppNavigationItem>
|
||||
/>
|
||||
</NcAppNavigation>
|
||||
<NcAppContent class="cm-settings cm-settings--nav">
|
||||
<SettingsSection :class="sectionClass('panel')">
|
||||
<SettingsSection :hidden="section !== 'panel'">
|
||||
<SectionTitle label="Panel" />
|
||||
|
||||
<SettingItem>
|
||||
|
|
@ -102,7 +101,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<AdminSaveButton :config="config" />
|
||||
</SettingsSection>
|
||||
|
||||
<SettingsSection :class="sectionClass('topMenu')">
|
||||
<SettingsSection :hidden="section !== 'topMenu'">
|
||||
<SectionTitle label="Top menu" />
|
||||
|
||||
<SettingItem>
|
||||
|
|
@ -146,7 +145,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<AdminSaveButton :config="config" />
|
||||
</SettingsSection>
|
||||
|
||||
<SettingsSection :class="sectionClass('apps')">
|
||||
<SettingsSection :hidden="section !== 'apps'">
|
||||
<SectionTitle label="Applications" />
|
||||
|
||||
<SettingItem>
|
||||
|
|
@ -179,7 +178,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<AdminSaveButton :config="config" />
|
||||
</SettingsSection>
|
||||
|
||||
<SettingsSection :class="sectionClass('cats')">
|
||||
<SettingsSection :hidden="section !== 'cats'">
|
||||
<SectionTitle label="Categories" />
|
||||
|
||||
<SettingItem :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])">
|
||||
|
|
@ -226,7 +225,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<AdminSaveButton :config="config" />
|
||||
</SettingsSection>
|
||||
|
||||
<SettingsSection :class="sectionClass('opener')">
|
||||
<SettingsSection :hidden="section !== 'opener'">
|
||||
<SectionTitle label="Opener" />
|
||||
|
||||
<SettingItem>
|
||||
|
|
@ -283,7 +282,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<AdminSaveButton :config="config" />
|
||||
</SettingsSection>
|
||||
|
||||
<SettingsSection :class="sectionClass('colors')">
|
||||
<SettingsSection :hidden="section !== 'colors'">
|
||||
<SectionTitle label="Colors" />
|
||||
|
||||
<SettingItem>
|
||||
|
|
@ -420,7 +419,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<AdminSaveButton :config="config" />
|
||||
</SettingsSection>
|
||||
|
||||
<SettingsSection :class="sectionClass('global')">
|
||||
<SettingsSection :hidden="section !== 'global'">
|
||||
<p class="cm-settings-tips">
|
||||
<em>{{ t('side_menu', 'Use the shortcut Ctrl+o to open and to hide the side menu. Use tab key to navigate.') }}</em>
|
||||
</p>
|
||||
|
|
@ -460,7 +459,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<AdminSaveButton :config="config" />
|
||||
</SettingsSection>
|
||||
|
||||
<SettingsSection :class="sectionClass('support')">
|
||||
<SettingsSection :hidden="section !== 'support'">
|
||||
<SectionTitle label="Support" />
|
||||
|
||||
<SettingItem>
|
||||
|
|
@ -481,7 +480,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
|
||||
<SettingItem>
|
||||
<SettingLabel label="Need help" />
|
||||
<SettingValue class="button-inline">
|
||||
<SettingValue class="cm-settings-button-inline">
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://deblan.gitnet.page/side_menu_doc/"
|
||||
|
|
@ -537,11 +536,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<NcModal
|
||||
v-if="showConfig"
|
||||
@close="showConfig = false"
|
||||
class="cm-settings-config-modal"
|
||||
>
|
||||
<div class="modal__content">
|
||||
<p style="margin-bottom: 5px">{{ trans('Configuration:') }}</p>
|
||||
<textarea
|
||||
class="config"
|
||||
readonly
|
||||
v-text="filterConfig(config)"
|
||||
></textarea>
|
||||
|
|
@ -621,12 +620,6 @@ const trans = (value) => {
|
|||
return t('side_menu', value)
|
||||
}
|
||||
|
||||
const sectionClass = (value) => {
|
||||
return {
|
||||
hidden: value !== section.value,
|
||||
}
|
||||
}
|
||||
|
||||
const copyConfig = () => {
|
||||
navigator.clipboard.writeText(JSON.stringify(filterConfig(config.value), null, 2))
|
||||
|
||||
|
|
@ -655,38 +648,3 @@ onMounted(async () => {
|
|||
setSection(sessionStorage.getItem('side_menu_section') ?? menu[0].section)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.button-inline button {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.config {
|
||||
width: 100%;
|
||||
height: 30vh;
|
||||
}
|
||||
|
||||
.modal__content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal__footer {
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.modal__footer button {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.save {
|
||||
display: block;
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -16,10 +16,8 @@
|
|||
*/
|
||||
|
||||
.cm-settings {
|
||||
padding: 20px;
|
||||
|
||||
&--nav {
|
||||
padding-top: 50px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
&-nav {
|
||||
|
|
@ -43,6 +41,10 @@
|
|||
&-section {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
|
||||
&--hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
|
|
@ -218,22 +220,39 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.side-menu-setting-table,
|
||||
.side-menu-setting-row,
|
||||
.side-menu-setting-label,
|
||||
.side-menu-setting-form {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
&-btn {
|
||||
&--save {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.side-menu-setting-label {
|
||||
margin-bottom: 10px;
|
||||
&-config-modal {
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 30vh;
|
||||
}
|
||||
|
||||
.modal__content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal__footer {
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.modal__footer button {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&-button-inline {
|
||||
button {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.side-menu-setting-save {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue