Ensembia/nextcloud-side_menu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve settings components and scss

Browse Source
This commit is contained in:
Simon Vieille
2025-04-14 17:54:37 +02:00
parent 0313ce4099
commit c8194a4dcc
18 changed files with 804 additions and 951 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/settings/TableRow.vue → src/components/settings/SettingItem.vue
+2 -2
View File
@@ -16,8 +16,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
--> -->
<template> <template>
<div <div
class="side-menu-setting-row" class="cm-settings-item"
:class="{ 'side-menu-setting-row--disabled': disabled }" :class="{ 'cm-settings-item--disabled': disabled }"
> >
<slot></slot> <slot></slot>
</div> </div>
src/components/settings/TableLabel.vue → src/components/settings/SettingLabel.vue
+4 -4
View File
@@ -16,11 +16,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
--> -->
<template> <template>
<div <div
class="side-menu-setting-label" class="cm-settings-item-label"
:class="{ :class="{
'side-menu-setting-label-short': short, 'cm-settings-item-label--short': short,
'side-menu-setting-label--top': top, 'cm-settings-item-label--top': top,
'side-menu-setting-label--middle': middle, 'cm-settings-item-label--middle': middle,
}" }"
> >
{{ t('side_menu', label) }} {{ t('side_menu', label) }}
src/components/settings/TableValue.vue → src/components/settings/SettingValue.vue
View File
src/components/settings/TableContainer.vue → src/components/settings/SettingsSection.vue
+1 -1
View File
@@ -15,7 +15,7 @@ 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/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
--> -->
<template> <template>
<div class="side-menu-setting-table"> <div class="cs-settings-section">
<slot></slot> <slot></slot>
</div> </div>
</template> </template>
src/components/settings/form/FormAppCategory.vue
+3 -43
View File
@@ -15,6 +15,7 @@ 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/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
--> -->
<template> <template>
<div class="cm-settings-form-appcategory">
<NcButton <NcButton
aria-label="t('side_menu', 'Customize')" aria-label="t('side_menu', 'Customize')"
variant="primary" variant="primary"
@@ -25,7 +26,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<NcModal <NcModal
v-if="modal" v-if="modal"
_size="small" class="cm-settings-form-appcategory-modal"
@close="closeModal" @close="closeModal"
> >
<div class="modal__content"> <div class="modal__content">
@@ -170,6 +171,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</div> </div>
</div> </div>
</NcModal> </NcModal>
</div>
</template> </template>
<script setup> <script setup>
@@ -296,45 +298,3 @@ onMounted(async () => {
emit('update:appsCategoriesCustom', value) emit('update:appsCategoriesCustom', value)
}) })
</script> </script>
<style scoped>
.modal__content {
padding: 20px;
}
.menu button {
display: inline-block;
margin-right: 5px;
}
.modal__footer {
margin-top: 20px;
text-align: right;
}
.modal__footer button {
display: inline-block;
}
td {
padding: 5px 0;
}
tr:hover,
td:hover {
background: none !important;
}
.form {
padding: 10px 0;
}
img {
width: 15px;
height: 15px;
}
.btn-close {
margin-left: 20px;
}
</style>
src/components/settings/form/FormAppPicker.vue
+3 -20
View File
@@ -15,6 +15,7 @@ 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/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
--> -->
<template> <template>
<div class="cm-settings-form-apppicker">
<NcButton <NcButton
aria-label="t('side_menu', 'Select apps')" aria-label="t('side_menu', 'Select apps')"
variant="primary" variant="primary"
@@ -26,6 +27,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<NcModal <NcModal
v-if="modal" v-if="modal"
size="small" size="small"
class="cm-settings-form-apppicker-modal"
@close="closeModal" @close="closeModal"
> >
<div class="modal__content"> <div class="modal__content">
@@ -53,6 +55,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</div> </div>
</div> </div>
</NcModal> </NcModal>
</div>
</template> </template>
<script setup> <script setup>
@@ -77,23 +80,3 @@ onMounted(async () => {
apps.value = await navStore.getCoreApps() apps.value = await navStore.getCoreApps()
}) })
</script> </script>
<style scoped>
.modal__content {
padding: 20px;
}
.modal__footer {
margin-top: 20px;
text-align: right;
}
.modal__footer button {
display: inline-block;
}
img {
width: 15px;
height: 15px;
}
</style>
src/components/settings/form/FormAppSort.vue
+5 -25
View File
@@ -15,6 +15,7 @@ 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/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
--> -->
<template> <template>
<div class="cm-settings-form-appsort">
<NcButton <NcButton
aria-label="t('side_menu', 'Sort')" aria-label="t('side_menu', 'Sort')"
variant="primary" variant="primary"
@@ -26,6 +27,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<NcModal <NcModal
v-if="modal" v-if="modal"
size="small" size="small"
class="cm-settings-form-appsort-modal"
@close="closeModal" @close="closeModal"
> >
<div class="modal__content"> <div class="modal__content">
@@ -35,8 +37,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
@end="update" @end="update"
> >
<template #item="{ element }"> <template #item="{ element }">
<div class="draggable"> <div class="cm-settings-form-draggable">
<span class="arrow">⇅</span> <span class="cm-settings-form-arrow">⇅</span>
{{ element.name }} {{ element.name }}
</div> </div>
</template> </template>
@@ -52,6 +54,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</div> </div>
</div> </div>
</NcModal> </NcModal>
</div>
</template> </template>
<script setup> <script setup>
@@ -111,26 +114,3 @@ onMounted(async () => {
}, 500) }, 500)
}) })
</script> </script>
<style scoped>
.modal__footer {
text-align: right;
padding: 20px;
}
.modal__footer button {
display: inline-block;
}
.draggable {
cursor: pointer;
padding: 8px 12px;
border-bottom: 1px solid var(--color-border);
}
.arrow {
color: var(--color-text-maxcontrast);
display: inline-block;
margin-right: 3px;
}
</style>
src/components/settings/form/FormCatSort.vue
+5 -25
View File
@@ -15,6 +15,7 @@ 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/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
--> -->
<template> <template>
<div class="cm-settings-form-catsort">
<NcButton <NcButton
aria-label="t('side_menu', 'Sort')" aria-label="t('side_menu', 'Sort')"
variant="primary" variant="primary"
@@ -26,6 +27,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<NcModal <NcModal
v-if="modal" v-if="modal"
size="small" size="small"
class="cm-settings-form-catsort-modal"
@close="closeModal" @close="closeModal"
> >
<div class="modal__content"> <div class="modal__content">
@@ -37,9 +39,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template #item="{ element }"> <template #item="{ element }">
<div <div
v-if="element.name !== ''" v-if="element.name !== ''"
class="draggable" class="cm-settings-form-draggable"
> >
<span class="arrow">⇅</span> <span class="cm-settings-form-arrow">⇅</span>
{{ element.name }} {{ element.name }}
</div> </div>
</template> </template>
@@ -55,6 +57,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</div> </div>
</div> </div>
</NcModal> </NcModal>
</div>
</template> </template>
<script setup> <script setup>
@@ -114,26 +117,3 @@ onMounted(async () => {
}, 500) }, 500)
}) })
</script> </script>
<style scoped>
.modal__footer {
padding: 20px;
text-align: right;
}
.modal__footer button {
display: inline-block;
}
.draggable {
cursor: pointer;
padding: 8px 12px;
border-bottom: 1px solid var(--color-border);
}
.arrow {
color: var(--color-text-maxcontrast);
display: inline-block;
margin-right: 3px;
}
</style>
src/components/settings/form/FormColorPicker.vue
+2 -2
View File
@@ -17,11 +17,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template> <template>
<NcColorPicker <NcColorPicker
v-model="model" v-model="model"
class="side-menu-setting-color-picker" class="cm-settings-form-colorpicker"
> >
<div <div
:style="{ 'background-color': model }" :style="{ 'background-color': model }"
class="side-menu-setting-color-picker-value" class="cm-settings-form-colorpicker-value"
/> />
</NcColorPicker> </NcColorPicker>
</template> </template>
src/components/settings/form/FormDisplayPicker.vue
+2 -14
View File
@@ -1,4 +1,5 @@
<template> <template>
<div class="cm-settings-form-displaypicker">
<NcButton <NcButton
:variant="is(false, false, false) ? 'primary' : 'seconday'" :variant="is(false, false, false) ? 'primary' : 'seconday'"
@click="update(false, false, false)" @click="update(false, false, false)"
@@ -27,12 +28,10 @@
<p> <p>
<img <img
v-if="is(false, false, false)" v-if="is(false, false, false)"
class="side-menu-display"
:src="DefaultImg" :src="DefaultImg"
/> />
<img <img
v-if="is(true, false, false)" v-if="is(true, false, false)"
class="side-menu-display"
:src="AlwaysDisplayedImg" :src="AlwaysDisplayedImg"
/> />
<img <img
@@ -42,10 +41,10 @@
/> />
<img <img
v-if="is(false, false, true)" v-if="is(false, false, true)"
class="side-menu-display"
:src="SideMenuWithCategoriesImg" :src="SideMenuWithCategoriesImg"
/> />
</p> </p>
</div>
</template> </template>
<script setup> <script setup>
import { NcButton } from '@nextcloud/vue' import { NcButton } from '@nextcloud/vue'
@@ -82,14 +81,3 @@ const is = (isAlwayDisplayed, isTopWideMenu, isSideMenuWithCategories) => {
return isAlwayDisplayed === alwaysDisplayed && isTopWideMenu === topWideMenu && isSideMenuWithCategories === sideMenuWithCategories return isAlwayDisplayed === alwaysDisplayed && isTopWideMenu === topWideMenu && isSideMenuWithCategories === sideMenuWithCategories
} }
</script> </script>
<style scoped>
button {
display: inline-block !important;
margin: 2px;
}
img {
max-width: 100%;
}
</style>
src/components/settings/form/FormOpener.vue
+1
View File
@@ -16,6 +16,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
--> -->
<template> <template>
<FormSelect <FormSelect
class="cm-settings-form-opener"
v-model="model" v-model="model"
:options="options" :options="options"
/> />
src/components/settings/form/FormRange.vue
+11 -18
View File
@@ -15,8 +15,12 @@ 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/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
--> -->
<template> <template>
<div> <div class="cm-settings-form-range">
<em v-if="prepend">{{ t('side_menu', prepend) }}</em> <em
class="cm-settings-form-range-prepend"
v-if="prepend"
>{{ t('side_menu', prepend) }}</em
>
<input <input
v-model="model" v-model="model"
@@ -25,7 +29,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:max="max" :max="max"
/> />
<em v-if="append">{{ t('side_menu', append) }}</em> <em
v-if="append"
class="cm-settings-form-range-append"
>{{ t('side_menu', append) }}</em
>
</div> </div>
</template> </template>
@@ -55,18 +63,3 @@ defineProps({
}, },
}) })
</script> </script>
<style scoped>
input {
min-height: auto;
}
div * {
vertical-align: middle;
}
em + input,
input + em {
margin-left: 10px;
}
</style>
src/components/settings/form/FormSelect.vue
+1 -1
View File
@@ -15,7 +15,7 @@ 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/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
--> -->
<template> <template>
<div> <div class="cm-settings-form-select">
<template v-if="!expanded"> <template v-if="!expanded">
<select <select
v-if="!expanded" v-if="!expanded"
src/components/settings/form/FormSize.vue
+1
View File
@@ -16,6 +16,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
--> -->
<template> <template>
<FormSelect <FormSelect
class="cm-settings-form-size"
v-model="model" v-model="model"
:options="options" :options="options"
/> />
src/components/settings/form/FormYesNo.vue
+1
View File
@@ -16,6 +16,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
--> -->
<template> <template>
<NcCheckboxRadioSwitch <NcCheckboxRadioSwitch
class="cm-settings-form-yesno"
v-model="model" v-model="model"
type="switch" type="switch"
/> />
src/pages/AdminSettings.vue
+227 -228
View File
@@ -19,23 +19,22 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
v-if="config" v-if="config"
app-name="side_menu" app-name="side_menu"
> >
<NcAppContent class="side-menu-setting-app"> <NcAppNavigation class="cm-settings-nav">
<div class="side-menu-setting"> <NcAppNavigationItem
<NcButton
v-for="item in menu" v-for="item in menu"
:key="item.label" :key="item.label"
:variant="item.section === section ? 'primary' : 'secondary'" :name="item.label"
:active="item.section === section"
@click="setSection(item.section)" @click="setSection(item.section)"
>{{ trans(item.label) }}</NcButton
> >
</div> </NcAppNavigationItem>
</NcAppNavigation>
<TableContainer :class="sectionClass('panel')"> <NcAppContent class="cm-settings cm-settings--nav">
<SettingsSection :class="sectionClass('panel')">
<SectionTitle label="Panel" /> <SectionTitle label="Panel" />
<TableRow> <SettingItem>
<TableLabel label="Display" /> <SettingValue>
<TableValue>
<FormDisplayPicker <FormDisplayPicker
:always-displayed="config['always-displayed']" :always-displayed="config['always-displayed']"
:top-wide-menu="config['big-menu']" :top-wide-menu="config['big-menu']"
@@ -44,95 +43,95 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
@update:top-wide-menu="(value) => (config['big-menu'] = value)" @update:top-wide-menu="(value) => (config['big-menu'] = value)"
@update:side-menu-with-categories="(value) => (config['side-with-categories'] = value)" @update:side-menu-with-categories="(value) => (config['side-with-categories'] = value)"
/> />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow :disabled="config['big-menu'] || config['always-displayed'] || config['side-with-categories']"> <SettingItem :disabled="config['big-menu'] || config['always-displayed'] || config['side-with-categories']">
<TableLabel <SettingLabel
label="Display the logo" label="Display the logo"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormYesNo v-model="config['display-logo']" /> <FormYesNo v-model="config['display-logo']" />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow :disabled="config['big-menu'] || config['always-displayed'] || config['side-with-categories']"> <SettingItem :disabled="config['big-menu'] || config['always-displayed'] || config['side-with-categories']">
<TableLabel <SettingLabel
label="Use the avatar instead of the logo" label="Use the avatar instead of the logo"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormYesNo v-model="config['use-avatar']" /> <FormYesNo v-model="config['use-avatar']" />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow :disabled="config['big-menu'] || config['always-displayed'] || config['side-with-categories']"> <SettingItem :disabled="config['big-menu'] || config['always-displayed'] || config['side-with-categories']">
<TableLabel <SettingLabel
label="The logo is a link to the default app" label="The logo is a link to the default app"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormYesNo v-model="config['add-logo-link']" /> <FormYesNo v-model="config['add-logo-link']" />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Show the link to settings" label="Show the link to settings"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormYesNo v-model="config['show-settings']" /> <FormYesNo v-model="config['show-settings']" />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Icons" label="Icons"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormSize v-model="config['size-icon']" /> <FormSize v-model="config['size-icon']" />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Texts" label="Texts"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormSize v-model="config['size-text']" /> <FormSize v-model="config['size-text']" />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<AdminSaveButton :config="config" /> <AdminSaveButton :config="config" />
</TableContainer> </SettingsSection>
<TableContainer :class="sectionClass('topMenu')"> <SettingsSection :class="sectionClass('topMenu')">
<SectionTitle label="Top menu" /> <SectionTitle label="Top menu" />
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Applications kept in the top menu" label="Applications kept in the top menu"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormAppPicker v-model="config['top-menu-apps']" /> <FormAppPicker v-model="config['top-menu-apps']" />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Applications kept in the top menu but also shown in side menu" label="Applications kept in the top menu but also shown in side menu"
help="These applications must be selected in the previous option." help="These applications must be selected in the previous option."
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormAppPicker v-model="config['top-side-menu-apps']" /> <FormAppPicker v-model="config['top-side-menu-apps']" />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Hide labels on mouse over" label="Hide labels on mouse over"
:top="true" :top="true"
/> />
<TableValue> <SettingValue>
<FormSelect <FormSelect
v-model="config['top-menu-mouse-over-hidden-label']" v-model="config['top-menu-mouse-over-hidden-label']"
:expanded="true" :expanded="true"
@@ -142,53 +141,53 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
{ id: 2, label: 'Except the hovered app' }, { id: 2, label: 'Except the hovered app' },
]" ]"
/> />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<AdminSaveButton :config="config" /> <AdminSaveButton :config="config" />
</TableContainer> </SettingsSection>
<TableContainer :class="sectionClass('apps')"> <SettingsSection :class="sectionClass('apps')">
<SectionTitle label="Applications" /> <SectionTitle label="Applications" />
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Apps that should not be displayed in the menu" label="Apps that should not be displayed in the menu"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormAppPicker v-model="config['big-menu-hidden-apps']" /> <FormAppPicker v-model="config['big-menu-hidden-apps']" />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Open apps in new tab" label="Open apps in new tab"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormAppPicker v-model="config['target-blank-apps']" /> <FormAppPicker v-model="config['target-blank-apps']" />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Customize sorting" label="Customize sorting"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormAppSort v-model="config['apps-order']" /> <FormAppSort v-model="config['apps-order']" />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<AdminSaveButton :config="config" /> <AdminSaveButton :config="config" />
</TableContainer> </SettingsSection>
<TableContainer :class="sectionClass('cats')"> <SettingsSection :class="sectionClass('cats')">
<SectionTitle label="Categories" /> <SectionTitle label="Categories" />
<TableRow :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])"> <SettingItem :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])">
<TableLabel <SettingLabel
label="Order by" label="Order by"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormSelect <FormSelect
v-model="config['categories-order-type']" v-model="config['categories-order-type']"
:options="[ :options="[
@@ -196,24 +195,24 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
{ id: 'custom', label: 'Custom' }, { id: 'custom', label: 'Custom' },
]" ]"
/> />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])"> <SettingItem :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])">
<TableLabel <SettingLabel
label="Customize sorting" label="Customize sorting"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormCatSort v-model="config['categories-order']" /> <FormCatSort v-model="config['categories-order']" />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])"> <SettingItem :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])">
<TableLabel <SettingLabel
label="Customize application categories" label="Customize application categories"
:top="true" :top="true"
> >
</TableLabel> </SettingLabel>
<TableValue> <SettingValue>
<FormAppCategory <FormAppCategory
:langs="config['langs']" :langs="config['langs']"
:categories-custom="config['categories-custom']" :categories-custom="config['categories-custom']"
@@ -221,39 +220,39 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
@update:categories-custom="(value) => (config['categories-custom'] = value)" @update:categories-custom="(value) => (config['categories-custom'] = value)"
@update:apps-categories-custom="(value) => (config['apps-categories-custom'] = value)" @update:apps-categories-custom="(value) => (config['apps-categories-custom'] = value)"
/> />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<AdminSaveButton :config="config" /> <AdminSaveButton :config="config" />
</TableContainer> </SettingsSection>
<TableContainer :class="sectionClass('opener')"> <SettingsSection :class="sectionClass('opener')">
<SectionTitle label="Opener" /> <SectionTitle label="Opener" />
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Opener" label="Opener"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormOpener v-model="config['opener']" /> <FormOpener v-model="config['opener']" />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Dark mode opener" label="Dark mode opener"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormOpener v-model="config['dark-mode-opener']" /> <FormOpener v-model="config['dark-mode-opener']" />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Position" label="Position"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormSelect <FormSelect
v-model="config['opener-position']" v-model="config['opener-position']"
:options="[ :options="[
@@ -261,38 +260,38 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
{ id: 'after', label: 'After the logo' }, { id: 'after', label: 'After the logo' },
]" ]"
/> />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Show only the opener (hidden logo)" label="Show only the opener (hidden logo)"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormYesNo v-model="config['opener-only']" /> <FormYesNo v-model="config['opener-only']" />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Open the menu when the mouse is hover the opener (automatically disabled on touch screens)" label="Open the menu when the mouse is hover the opener (automatically disabled on touch screens)"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormYesNo v-model="config['opener-hover']" /> <FormYesNo v-model="config['opener-hover']" />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<AdminSaveButton :config="config" /> <AdminSaveButton :config="config" />
</TableContainer> </SettingsSection>
<TableContainer :class="sectionClass('colors')"> <SettingsSection :class="sectionClass('colors')">
<SectionTitle label="Colors" /> <SectionTitle label="Colors" />
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Background color" label="Background color"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormColorPicker v-model="config['background-color']" /> <FormColorPicker v-model="config['background-color']" />
<FormColorPicker v-model="config['background-color-to']" /> <FormColorPicker v-model="config['background-color-to']" />
<FormRange <FormRange
@@ -300,45 +299,45 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
prepend="Transparent" prepend="Transparent"
append="Opaque" append="Opaque"
/> />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Background color of current app" label="Background color of current app"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormColorPicker v-model="config['current-app-background-color']" /> <FormColorPicker v-model="config['current-app-background-color']" />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Text color" label="Text color"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormColorPicker v-model="config['text-color']" /> <FormColorPicker v-model="config['text-color']" />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Loader" label="Loader"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormColorPicker v-model="config['loader-color']" /> <FormColorPicker v-model="config['loader-color']" />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Icon" label="Icon"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormRange <FormRange
v-model="config['icon-invert-filter']" v-model="config['icon-invert-filter']"
prepend="Same color" prepend="Same color"
@@ -349,17 +348,17 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
prepend="Transparent" prepend="Transparent"
append="Opaque" append="Opaque"
/> />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<SectionTitle label="Dark mode colors" /> <SectionTitle label="Dark mode colors" />
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Background color" label="Background color"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormColorPicker v-model="config['dark-mode-background-color']" /> <FormColorPicker v-model="config['dark-mode-background-color']" />
<FormColorPicker v-model="config['dark-mode-background-color-to']" /> <FormColorPicker v-model="config['dark-mode-background-color-to']" />
<FormRange <FormRange
@@ -367,45 +366,45 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
prepend="Transparent" prepend="Transparent"
append="Opaque" append="Opaque"
/> />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Background color of current app" label="Background color of current app"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormColorPicker v-model="config['dark-mode-current-app-background-color']" /> <FormColorPicker v-model="config['dark-mode-current-app-background-color']" />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Text color" label="Text color"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormColorPicker v-model="config['dark-mode-text-color']" /> <FormColorPicker v-model="config['dark-mode-text-color']" />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Loader" label="Loader"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormColorPicker v-model="config['dark-mode-loader-color']" /> <FormColorPicker v-model="config['dark-mode-loader-color']" />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Icon" label="Icon"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormRange <FormRange
v-model="config['dark-mode-icon-invert-filter']" v-model="config['dark-mode-icon-invert-filter']"
prepend="Same color" prepend="Same color"
@@ -416,60 +415,60 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
prepend="Transparent" prepend="Transparent"
append="Opaque" append="Opaque"
/> />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<AdminSaveButton :config="config" /> <AdminSaveButton :config="config" />
</TableContainer> </SettingsSection>
<TableContainer :class="sectionClass('global')"> <SettingsSection :class="sectionClass('global')">
<p class="side-menu-tips"> <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> <em>{{ t('side_menu', 'Use the shortcut Ctrl+o to open and to hide the side menu. Use tab key to navigate.') }}</em>
</p> </p>
<SectionTitle label="Global" /> <SectionTitle label="Global" />
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="The menu is enabled by default for users" label="The menu is enabled by default for users"
help="Except when the configuration is forced." help="Except when the configuration is forced."
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormYesNo v-model="config['default-enabled']" /> <FormYesNo v-model="config['default-enabled']" />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Force this configuration to users" label="Force this configuration to users"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormYesNo v-model="config['force']" /> <FormYesNo v-model="config['force']" />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Loader enabled" label="Loader enabled"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormYesNo v-model="config['loader-enabled']" /> <FormYesNo v-model="config['loader-enabled']" />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<AdminSaveButton :config="config" /> <AdminSaveButton :config="config" />
</TableContainer> </SettingsSection>
<TableContainer :class="sectionClass('support')"> <SettingsSection :class="sectionClass('support')">
<SectionTitle label="Support" /> <SectionTitle label="Support" />
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="You like this app and you want to support me?" label="You like this app and you want to support me?"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<a <a
target="_blank" target="_blank"
href="https://www.buymeacoffee.com/deblan" href="https://www.buymeacoffee.com/deblan"
@@ -477,12 +476,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
> >
<NcButton variant="secondary">{{ trans('Buy me a coffee ☕') }}</NcButton> <NcButton variant="secondary">{{ trans('Buy me a coffee ☕') }}</NcButton>
</a> </a>
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow> <SettingItem>
<TableLabel label="Need help" /> <SettingLabel label="Need help" />
<TableValue class="button-inline"> <SettingValue class="button-inline">
<a <a
target="_blank" target="_blank"
href="https://deblan.gitnet.page/side_menu_doc/" href="https://deblan.gitnet.page/side_menu_doc/"
@@ -497,15 +496,15 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
> >
<NcButton variant="secondary">{{ trans('Ask the developer') }}</NcButton> <NcButton variant="secondary">{{ trans('Ask the developer') }}</NcButton>
</a> </a>
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="I would like a new feature" label="I would like a new feature"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<a <a
target="_blank" target="_blank"
href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fFEATURE_TEMPLATE.yml" href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fFEATURE_TEMPLATE.yml"
@@ -513,15 +512,15 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
> >
<NcButton variant="secondary">{{ trans('New request') }}</NcButton> <NcButton variant="secondary">{{ trans('New request') }}</NcButton>
</a> </a>
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Something went wrong" label="Something went wrong"
:top="true" :top="true"
/> />
<TableValue class="button-inline"> <SettingValue class="button-inline">
<a <a
target="_blank" target="_blank"
href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fISSUE_TEMPLATE.yml" href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fISSUE_TEMPLATE.yml"
@@ -564,23 +563,23 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</div> </div>
</div> </div>
</NcModal> </NcModal>
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<AdminSaveButton :config="config" /> <AdminSaveButton :config="config" />
</TableContainer> </SettingsSection>
</NcAppContent> </NcAppContent>
</NcContent> </NcContent>
</template> </template>
<script setup> <script setup>
import { NcContent, NcAppContent, NcButton, NcModal } from '@nextcloud/vue' import { NcContent, NcAppContent, NcButton, NcModal, NcAppNavigation, NcAppNavigationItem } from '@nextcloud/vue'
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import { useConfigStore } from '../store/config.js' import { useConfigStore } from '../store/config.js'
import TableContainer from '../components/settings/TableContainer' import SettingsSection from '../components/settings/SettingsSection'
import TableRow from '../components/settings/TableRow' import SettingItem from '../components/settings/SettingItem'
import TableLabel from '../components/settings/TableLabel' import SettingLabel from '../components/settings/SettingLabel'
import TableValue from '../components/settings/TableValue' import SettingValue from '../components/settings/SettingValue'
import SectionTitle from '../components/settings/SectionTitle' import SectionTitle from '../components/settings/SectionTitle'
import AdminSaveButton from '../components/settings/AdminSaveButton' import AdminSaveButton from '../components/settings/AdminSaveButton'
import FormRange from '../components/settings/form/FormRange' import FormRange from '../components/settings/form/FormRange'
@@ -596,14 +595,14 @@ import FormDisplayPicker from '../components/settings/form/FormDisplayPicker'
import FormAppCategory from '../components/settings/form/FormAppCategory' import FormAppCategory from '../components/settings/form/FormAppCategory'
const menu = [ const menu = [
{ label: 'Global', section: 'global' }, { label: 'Global', section: 'global', icon: '' },
{ label: 'Panel', section: 'panel' }, { label: 'Panel', section: 'panel', icon: '' },
{ label: 'Colors', section: 'colors' }, { label: 'Colors', section: 'colors', icon: '' },
{ label: 'Opener', section: 'opener' }, { label: 'Opener', section: 'opener', icon: '' },
{ label: 'Applications', section: 'apps' }, { label: 'Applications', section: 'apps', icon: '' },
{ label: 'Categories', section: 'cats' }, { label: 'Categories', section: 'cats', icon: '' },
{ label: 'Top menu', section: 'topMenu' }, { label: 'Top menu', section: 'topMenu', icon: '' },
{ label: 'Support', section: 'support' }, { label: 'Support', section: 'support', icon: '' },
] ]
const config = ref(null) const config = ref(null)
src/pages/UserSettings.vue
+43 -43
View File
@@ -21,55 +21,55 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
> >
<NcAppContent <NcAppContent
v-if="config['force']" v-if="config['force']"
class="side-menu-setting-app" class="cm-settings"
> >
<TableContainer> <SettingsSection>
<TableLabel label="You do not have permission to change the settings." /> <SettingLabel label="You do not have permission to change the settings." />
</TableContainer> </SettingsSection>
</NcAppContent> </NcAppContent>
<NcAppContent <NcAppContent
v-else v-else
class="side-menu-setting-app side-menu-setting-app--user" class="cm-settings"
> >
<TableContainer> <SettingsSection>
<SectionTitle label="Menu" /> <SectionTitle label="Menu" />
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Enable the custom menu" label="Enable the custom menu"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormYesNo v-model="config['enabled']" /> <FormYesNo v-model="config['enabled']" />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Applications kept in the top menu" label="Applications kept in the top menu"
help="If there is no selection then the global configuration is applied." help="If there is no selection then the global configuration is applied."
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormAppPicker v-model="config['top-menu-apps']" /> <FormAppPicker v-model="config['top-menu-apps']" />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Applications kept in the top menu but also shown in side menu" label="Applications kept in the top menu but also shown in side menu"
help="These applications must be selected in the previous option." help="These applications must be selected in the previous option."
help2="If there is no selection then the global configuration is applied" help2="If there is no selection then the global configuration is applied"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormAppPicker v-model="config['top-side-menu-apps']" /> <FormAppPicker v-model="config['top-side-menu-apps']" />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Open apps in new tab" label="Open apps in new tab"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<FormSelect <FormSelect
v-model="config['target-blank-mode']" v-model="config['target-blank-mode']"
:options="[ :options="[
@@ -81,28 +81,28 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
v-if="config['target-blank-mode'] === 2" v-if="config['target-blank-mode'] === 2"
v-model="config['target-blank-apps']" v-model="config['target-blank-apps']"
/> />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="Customize sorting" label="Customize sorting"
:top="true" :top="true"
/> />
<TableValue> <SettingValue>
<FormAppSort v-model="config['apps-order']" /> <FormAppSort v-model="config['apps-order']" />
</TableValue> </SettingValue>
</TableRow> </SettingItem>
</TableContainer> </SettingsSection>
<TableContainer> <SettingsSection>
<SectionTitle label="Support" /> <SectionTitle label="Support" />
<TableRow> <SettingItem>
<TableLabel <SettingLabel
label="You like this app and you want to support me?" label="You like this app and you want to support me?"
:middle="true" :middle="true"
/> />
<TableValue> <SettingValue>
<a <a
target="_blank" target="_blank"
href="https://www.buymeacoffee.com/deblan" href="https://www.buymeacoffee.com/deblan"
@@ -110,11 +110,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
> >
<NcButton variant="secondary">{{ trans('Buy me a coffee ☕') }}</NcButton> <NcButton variant="secondary">{{ trans('Buy me a coffee ☕') }}</NcButton>
</a> </a>
</TableValue> </SettingValue>
</TableRow> </SettingItem>
<UserSaveButton :config="config" /> <UserSaveButton :config="config" />
</TableContainer> </SettingsSection>
</NcAppContent> </NcAppContent>
</NcContent> </NcContent>
</template> </template>
@@ -124,10 +124,10 @@ import { NcContent, NcAppContent, NcButton } from '@nextcloud/vue'
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import { useConfigStore } from '../store/config.js' import { useConfigStore } from '../store/config.js'
import TableContainer from '../components/settings/TableContainer' import SettingsSection from '../components/settings/SettingsSection'
import TableRow from '../components/settings/TableRow' import SettingItem from '../components/settings/SettingItem'
import TableLabel from '../components/settings/TableLabel' import SettingLabel from '../components/settings/SettingLabel'
import TableValue from '../components/settings/TableValue' import SettingValue from '../components/settings/SettingValue'
import SectionTitle from '../components/settings/SectionTitle' import SectionTitle from '../components/settings/SectionTitle'
import UserSaveButton from '../components/settings/UserSaveButton' import UserSaveButton from '../components/settings/UserSaveButton'
import FormYesNo from '../components/settings/form/FormYesNo' import FormYesNo from '../components/settings/form/FormYesNo'
src/scss/admin.scss
+170 -203
View File
@@ -15,144 +15,209 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
#side-menu-section input[type='color'] { .cm-settings {
width: 100px; padding: 20px;
margin: 10px 0 10px 0;
padding: 0; &--nav {
border-radius: 0; padding-top: 50px;
} }
#-dropside-menu-section input[type='checkbox'] { &-nav {
vertical-align: middle; .app-navigation__content {
padding: 20px;
} }
#side-menu-section input[type='range'] { .app-navigation-entry-icon {
vertical-align: middle; display: none !important;
} }
#side-menu-section select { .app-navigation-entry__name {
margin: 10px 0 10px 0; padding-left: 10px !important;
}
} }
.keyboard-key { &-tips {
padding: 1px 9px; margin-bottom: 15px;
margin: 0 2px;
background: #eee;
border: 1px solid #aaa;
color: #555;
border-radius: 3px;
} }
.side-menu-display { &-section {
padding: 10px;
border: 2px solid transparent;
max-width: 100%;
cursor: pointer;
}
.side-menu-display.is-active {
border: 2px solid #91cb7f;
}
.info {
margin-top: 8px;
padding: 5px;
background: #91cb7f;
color: #fff;
border-radius: var(--border-radius);
}
#side-menu-section h2 small {
font-size: 11px;
font-weight: normal;
}
.side-menu-toggler {
cursor: pointer;
}
.side-menu-setting-list {
margin: 10px 4px 4px 0px;
border: 2px solid var(--color-border-dark);
border-radius: 15px;
}
.side-menu-setting-list-item {
padding: 5px 10px;
border-bottom: 1px solid var(--color-border-dark);
max-width: 300px;
margin: -1px 0 0 0;
cursor: pointer;
line-height: 32px;
}
.side-menu-setting-list-item:last-child {
border-bottom: 0;
}
.side-menu-setting-list-drop {
background: yellow;
border-color: yellow;
height: 34px;
}
.side-menu-setting.arrow {
color: #ccc;
padding-right: 5px;
}
.side-menu-setting-list-item input {
margin-top: 0;
height: 21px !important;
min-height: auto !important;
}
#apps-categories-custom-list select {
width: 100%;
}
.side-menu-setting-table {
display: table;
width: 100%; width: 100%;
padding: 20px; padding: 20px;
} }
.side-menu-setting-row { &-item {
display: table; display: flex;
justify-content: start;
margin-bottom: 10px; margin-bottom: 10px;
&--disabled { &--disabled {
opacity: 0.5; opacity: 0.5;
} }
}
.side-menu-setting-label { &-label {
display: table-cell; max-width: 350px;
width: 430px; width: 100%;
max-width: 30vw;
padding-right: 20px; padding-right: 20px;
&--short {
max-width: 300px;
} }
.side-menu-setting-label--top { &--top {
vertical-align: top; vertical-align: top;
} }
.side-menu-setting-label--middle { &--middle {
display: flex;
flex-direction: column;
text-align: left;
}
}
&-form {
}
}
&-form {
&-arrow {
color: var(--color-text-maxcontrast);
display: inline-block;
margin-right: 3px;
}
&-draggable {
cursor: pointer;
padding: 8px 12px;
border-bottom: 1px solid var(--color-border);
}
&-displaypicker {
button {
display: inline-block !important;
margin: 2px;
}
img {
padding: 10px 10px 10px 0;
border: 2px solid transparent;
max-width: 100%;
cursor: pointer;
}
}
&-colorpicker {
display: inline-block;
margin-right: 12px;
width: 60px;
height: 30px;
&-value {
cursor: pointer;
width: 60px;
height: 30px;
border-radius: 6px;
}
}
&-range {
input {
min-height: auto;
}
div * {
vertical-align: middle; vertical-align: middle;
} }
.side-menu-setting-form { em + input,
display: table-cell; input + em {
min-width: 300px; margin-left: 10px;
max-width: 40vw; }
} }
.side-menu-setting-label-short { &-catsort-modal {
width: 300px; .modal__footer {
padding: 20px;
text-align: right;
} }
.side-menu-setting-form-long { .modal__footer button {
width: 400px; display: inline-block;
}
}
&-appsort-modal {
.modal__footer {
text-align: right;
padding: 20px;
}
.modal__footer button {
display: inline-block;
}
}
&-apppicker-modal {
.modal__content {
padding: 20px;
}
.modal__footer {
margin-top: 20px;
text-align: right;
}
.modal__footer button {
display: inline-block;
}
img {
width: 15px;
height: 15px;
}
}
&-appcategory-modal {
.modal__content {
padding: 20px;
}
.menu button {
display: inline-block;
margin-right: 5px;
}
.modal__footer {
margin-top: 20px;
text-align: right;
}
.modal__footer button {
display: inline-block;
}
td {
padding: 5px 0;
}
tr:hover,
td:hover {
background: none !important;
}
.form {
padding: 10px 0;
}
img {
width: 15px;
height: 15px;
}
.btn-close {
margin-left: 20px;
}
}
}
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
@@ -169,104 +234,6 @@
} }
} }
#side-menu-save-progress {
display: inline-block;
width: 0;
height: 15px;
background: #fff;
}
.btn-reset {
display: inline-block;
cursor: pointer;
position: relative;
top: -8px;
left: 5px;
transition-duration: 0.8s;
transition-property: transform;
transform: rotate(360deg);
}
.btn-reset--down {
top: 2px;
}
.btn-reset--progress {
transform: rotate(-359deg);
}
.badges {
margin-bottom: 14px;
margin-top: 4px;
}
.badge {
border-width: 1px;
padding: 2px 8px;
margin-right: 2px;
margin-bottom: 5px;
display: inline-block;
border-radius: 4px;
font-size: 13px;
}
.badge-1 {
background: #d4ce14;
border-color: #cad413;
color: #373a05;
}
.badge-2 {
background: #96d47f;
border-color: #7ed49b;
color: #333;
}
.badge-3 {
background: #d4540a;
border-color: #d4700c;
color: #fff;
}
.badge-4 {
background: #9d81d4;
border-color: #c681d4;
color: #fff;
}
.side-menu-setting-color-picker {
display: inline-block;
margin-right: 12px;
width: 60px;
height: 30px;
&-value {
cursor: pointer;
width: 60px;
height: 30px;
border-radius: 6px;
}
}
.side-menu-setting-app {
display: flex;
&--user {
display: block;
}
}
.side-menu-setting {
padding: 20px;
display: flex;
flex-direction: column;
gap: 6px;
}
.side-menu-setting-save { .side-menu-setting-save {
margin-top: 30px; margin-top: 30px;
} }
.side-menu-tips {
margin-bottom: 15px;
}