forked from deblan/side_menu
improve settings components and scss
This commit is contained in:
parent
0313ce4099
commit
c8194a4dcc
GPG key ID:
579388D585F70417
18 changed files with 799 additions and 946 deletions
|
|
@ -16,8 +16,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
-->
|
||||
<template>
|
||||
<div
|
||||
class="side-menu-setting-row"
|
||||
:class="{ 'side-menu-setting-row--disabled': disabled }"
|
||||
class="cm-settings-item"
|
||||
:class="{ 'cm-settings-item--disabled': disabled }"
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
|
@ -16,11 +16,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
-->
|
||||
<template>
|
||||
<div
|
||||
class="side-menu-setting-label"
|
||||
class="cm-settings-item-label"
|
||||
:class="{
|
||||
'side-menu-setting-label-short': short,
|
||||
'side-menu-setting-label--top': top,
|
||||
'side-menu-setting-label--middle': middle,
|
||||
'cm-settings-item-label--short': short,
|
||||
'cm-settings-item-label--top': top,
|
||||
'cm-settings-item-label--middle': middle,
|
||||
}"
|
||||
>
|
||||
{{ t('side_menu', label) }}
|
||||
|
|
@ -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/>.
|
||||
-->
|
||||
<template>
|
||||
<div class="side-menu-setting-table">
|
||||
<div class="cs-settings-section">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -15,161 +15,163 @@ 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>
|
||||
<NcButton
|
||||
aria-label="t('side_menu', 'Customize')"
|
||||
variant="primary"
|
||||
@click="openModal"
|
||||
>
|
||||
{{ t('side_menu', 'Customize') }}
|
||||
</NcButton>
|
||||
<div class="cm-settings-form-appcategory">
|
||||
<NcButton
|
||||
aria-label="t('side_menu', 'Customize')"
|
||||
variant="primary"
|
||||
@click="openModal"
|
||||
>
|
||||
{{ t('side_menu', 'Customize') }}
|
||||
</NcButton>
|
||||
|
||||
<NcModal
|
||||
v-if="modal"
|
||||
_size="small"
|
||||
@close="closeModal"
|
||||
>
|
||||
<div class="modal__content">
|
||||
<div class="menu">
|
||||
<NcButton
|
||||
aria-label="t('side_menu', 'Categories')"
|
||||
:variant="section === 'cats' ? 'primary' : 'secondary'"
|
||||
@click="setSection('cats')"
|
||||
>
|
||||
{{ t('side_menu', 'Categories') }}
|
||||
</NcButton>
|
||||
<NcButton
|
||||
aria-label="t('side_menu', 'Applications')"
|
||||
:variant="section === 'apps' ? 'primary' : 'secondary'"
|
||||
@click="setSection('apps')"
|
||||
>
|
||||
{{ t('side_menu', 'Applications') }}
|
||||
</NcButton>
|
||||
</div>
|
||||
<NcModal
|
||||
v-if="modal"
|
||||
class="cm-settings-form-appcategory-modal"
|
||||
@close="closeModal"
|
||||
>
|
||||
<div class="modal__content">
|
||||
<div class="menu">
|
||||
<NcButton
|
||||
aria-label="t('side_menu', 'Categories')"
|
||||
:variant="section === 'cats' ? 'primary' : 'secondary'"
|
||||
@click="setSection('cats')"
|
||||
>
|
||||
{{ t('side_menu', 'Categories') }}
|
||||
</NcButton>
|
||||
<NcButton
|
||||
aria-label="t('side_menu', 'Applications')"
|
||||
:variant="section === 'apps' ? 'primary' : 'secondary'"
|
||||
@click="setSection('apps')"
|
||||
>
|
||||
{{ t('side_menu', 'Applications') }}
|
||||
</NcButton>
|
||||
</div>
|
||||
|
||||
<div v-if="section === 'cats'">
|
||||
<table
|
||||
v-if="!newCustomCategory && editCustomCategoryKey === null"
|
||||
width="100%"
|
||||
>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(item, key) in categoriesCustom"
|
||||
:key="key"
|
||||
>
|
||||
<td>{{ item[langs[0]] }}</td>
|
||||
<td width="50px">
|
||||
<NcActions>
|
||||
<NcActionButton
|
||||
icon="icon-edit"
|
||||
@click="editCustomCategory(key)"
|
||||
></NcActionButton>
|
||||
<NcActionButton
|
||||
icon="icon-delete"
|
||||
@click="removeCustomCategory(key)"
|
||||
></NcActionButton>
|
||||
</NcActions>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div
|
||||
v-else
|
||||
class="form"
|
||||
>
|
||||
<template v-if="newCustomCategory">
|
||||
<NcTextField
|
||||
v-for="lang in langs"
|
||||
:key="lang"
|
||||
v-model="newCustomCategory[lang]"
|
||||
:label="lang"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="editCustomCategoryKey !== null">
|
||||
<NcTextField
|
||||
v-for="lang in langs"
|
||||
:key="lang"
|
||||
v-model="categoriesCustom[editCustomCategoryKey][lang]"
|
||||
:label="lang"
|
||||
/>
|
||||
<div v-if="section === 'cats'">
|
||||
<table
|
||||
v-if="!newCustomCategory && editCustomCategoryKey === null"
|
||||
width="100%"
|
||||
>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(item, key) in categoriesCustom"
|
||||
:key="key"
|
||||
>
|
||||
<td>{{ item[langs[0]] }}</td>
|
||||
<td width="50px">
|
||||
<NcActions>
|
||||
<NcActionButton
|
||||
icon="icon-edit"
|
||||
@click="editCustomCategory(key)"
|
||||
></NcActionButton>
|
||||
<NcActionButton
|
||||
icon="icon-delete"
|
||||
@click="removeCustomCategory(key)"
|
||||
></NcActionButton>
|
||||
</NcActions>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div
|
||||
v-else
|
||||
class="form"
|
||||
>
|
||||
<template v-if="newCustomCategory">
|
||||
<NcTextField
|
||||
v-for="lang in langs"
|
||||
:key="lang"
|
||||
v-model="newCustomCategory[lang]"
|
||||
:label="lang"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="editCustomCategoryKey !== null">
|
||||
<NcTextField
|
||||
v-for="lang in langs"
|
||||
:key="lang"
|
||||
v-model="categoriesCustom[editCustomCategoryKey][lang]"
|
||||
:label="lang"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="section === 'apps'">
|
||||
<table width="100%">
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="item in apps"
|
||||
:key="item.id"
|
||||
>
|
||||
<td>
|
||||
<img
|
||||
:src="item.icon"
|
||||
:alt="item.name"
|
||||
/>
|
||||
{{ item.name }}
|
||||
</td>
|
||||
<td width="50%">
|
||||
<FormSelect
|
||||
v-model="appsCategoriesCustom[item.id]"
|
||||
:options="getOptions(categoriesCustom)"
|
||||
:required="false"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="modal__footer">
|
||||
<template v-if="section === 'cats'">
|
||||
<template v-if="newCustomCategory">
|
||||
<NcActions>
|
||||
<NcActionButton
|
||||
icon="icon-close"
|
||||
@click="cancelCustomCategory"
|
||||
></NcActionButton>
|
||||
</NcActions>
|
||||
<NcActions>
|
||||
<NcActionButton
|
||||
icon="icon-checkmark"
|
||||
@click="saveCustomCategory"
|
||||
></NcActionButton>
|
||||
</NcActions>
|
||||
</template>
|
||||
<template v-if="editCustomCategoryKey !== null">
|
||||
<NcActions>
|
||||
<NcActionButton
|
||||
icon="icon-close"
|
||||
@click="cancelCustomCategory"
|
||||
></NcActionButton>
|
||||
</NcActions>
|
||||
</template>
|
||||
<template v-else>
|
||||
<NcActions>
|
||||
<NcActionButton
|
||||
v-if="!newCustomCategory && editCustomCategoryKey === null"
|
||||
icon="icon-add"
|
||||
@click="addCustomCategory"
|
||||
></NcActionButton>
|
||||
<NcActionButton
|
||||
v-if="editCustomCategoryKey !== null"
|
||||
icon="icon-checkmark"
|
||||
@click="saveCustomCategory"
|
||||
></NcActionButton>
|
||||
</NcActions>
|
||||
</template>
|
||||
</template>
|
||||
<NcButton
|
||||
variant="primary"
|
||||
class="btn-close"
|
||||
@click="closeModal"
|
||||
>
|
||||
{{ t('side_menu', 'Close') }}
|
||||
</NcButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="section === 'apps'">
|
||||
<table width="100%">
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="item in apps"
|
||||
:key="item.id"
|
||||
>
|
||||
<td>
|
||||
<img
|
||||
:src="item.icon"
|
||||
:alt="item.name"
|
||||
/>
|
||||
{{ item.name }}
|
||||
</td>
|
||||
<td width="50%">
|
||||
<FormSelect
|
||||
v-model="appsCategoriesCustom[item.id]"
|
||||
:options="getOptions(categoriesCustom)"
|
||||
:required="false"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="modal__footer">
|
||||
<template v-if="section === 'cats'">
|
||||
<template v-if="newCustomCategory">
|
||||
<NcActions>
|
||||
<NcActionButton
|
||||
icon="icon-close"
|
||||
@click="cancelCustomCategory"
|
||||
></NcActionButton>
|
||||
</NcActions>
|
||||
<NcActions>
|
||||
<NcActionButton
|
||||
icon="icon-checkmark"
|
||||
@click="saveCustomCategory"
|
||||
></NcActionButton>
|
||||
</NcActions>
|
||||
</template>
|
||||
<template v-if="editCustomCategoryKey !== null">
|
||||
<NcActions>
|
||||
<NcActionButton
|
||||
icon="icon-close"
|
||||
@click="cancelCustomCategory"
|
||||
></NcActionButton>
|
||||
</NcActions>
|
||||
</template>
|
||||
<template v-else>
|
||||
<NcActions>
|
||||
<NcActionButton
|
||||
v-if="!newCustomCategory && editCustomCategoryKey === null"
|
||||
icon="icon-add"
|
||||
@click="addCustomCategory"
|
||||
></NcActionButton>
|
||||
<NcActionButton
|
||||
v-if="editCustomCategoryKey !== null"
|
||||
icon="icon-checkmark"
|
||||
@click="saveCustomCategory"
|
||||
></NcActionButton>
|
||||
</NcActions>
|
||||
</template>
|
||||
</template>
|
||||
<NcButton
|
||||
variant="primary"
|
||||
class="btn-close"
|
||||
@click="closeModal"
|
||||
>
|
||||
{{ t('side_menu', 'Close') }}
|
||||
</NcButton>
|
||||
</div>
|
||||
</div>
|
||||
</NcModal>
|
||||
</NcModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -296,45 +298,3 @@ onMounted(async () => {
|
|||
emit('update:appsCategoriesCustom', value)
|
||||
})
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -15,44 +15,47 @@ 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>
|
||||
<NcButton
|
||||
aria-label="t('side_menu', 'Select apps')"
|
||||
variant="primary"
|
||||
@click="openModal"
|
||||
>
|
||||
{{ t('side_menu', 'Select apps') }} ({{ model.length }})
|
||||
</NcButton>
|
||||
<div class="cm-settings-form-apppicker">
|
||||
<NcButton
|
||||
aria-label="t('side_menu', 'Select apps')"
|
||||
variant="primary"
|
||||
@click="openModal"
|
||||
>
|
||||
{{ t('side_menu', 'Select apps') }} ({{ model.length }})
|
||||
</NcButton>
|
||||
|
||||
<NcModal
|
||||
v-if="modal"
|
||||
size="small"
|
||||
@close="closeModal"
|
||||
>
|
||||
<div class="modal__content">
|
||||
<NcCheckboxRadioSwitch
|
||||
v-for="(item, key) in apps"
|
||||
:key="key"
|
||||
v-model="model"
|
||||
name="value"
|
||||
:value="item.id"
|
||||
>
|
||||
<img
|
||||
:src="item.icon"
|
||||
:alt="item.name"
|
||||
/>
|
||||
{{ item.name }}
|
||||
</NcCheckboxRadioSwitch>
|
||||
|
||||
<div class="modal__footer">
|
||||
<NcButton
|
||||
variant="primary"
|
||||
@click="closeModal"
|
||||
<NcModal
|
||||
v-if="modal"
|
||||
size="small"
|
||||
class="cm-settings-form-apppicker-modal"
|
||||
@close="closeModal"
|
||||
>
|
||||
<div class="modal__content">
|
||||
<NcCheckboxRadioSwitch
|
||||
v-for="(item, key) in apps"
|
||||
:key="key"
|
||||
v-model="model"
|
||||
name="value"
|
||||
:value="item.id"
|
||||
>
|
||||
{{ t('side_menu', 'Close') }}
|
||||
</NcButton>
|
||||
<img
|
||||
:src="item.icon"
|
||||
:alt="item.name"
|
||||
/>
|
||||
{{ item.name }}
|
||||
</NcCheckboxRadioSwitch>
|
||||
|
||||
<div class="modal__footer">
|
||||
<NcButton
|
||||
variant="primary"
|
||||
@click="closeModal"
|
||||
>
|
||||
{{ t('side_menu', 'Close') }}
|
||||
</NcButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NcModal>
|
||||
</NcModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -77,23 +80,3 @@ onMounted(async () => {
|
|||
apps.value = await navStore.getCoreApps()
|
||||
})
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -15,43 +15,46 @@ 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>
|
||||
<NcButton
|
||||
aria-label="t('side_menu', 'Sort')"
|
||||
variant="primary"
|
||||
@click="openModal"
|
||||
>
|
||||
{{ t('side_menu', 'Sort') }}
|
||||
</NcButton>
|
||||
<div class="cm-settings-form-appsort">
|
||||
<NcButton
|
||||
aria-label="t('side_menu', 'Sort')"
|
||||
variant="primary"
|
||||
@click="openModal"
|
||||
>
|
||||
{{ t('side_menu', 'Sort') }}
|
||||
</NcButton>
|
||||
|
||||
<NcModal
|
||||
v-if="modal"
|
||||
size="small"
|
||||
@close="closeModal"
|
||||
>
|
||||
<div class="modal__content">
|
||||
<draggable
|
||||
v-model="apps"
|
||||
item-key="id"
|
||||
@end="update"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<div class="draggable">
|
||||
<span class="arrow">⇅</span>
|
||||
{{ element.name }}
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
|
||||
<div class="modal__footer">
|
||||
<NcButton
|
||||
variant="primary"
|
||||
@click="closeModal"
|
||||
<NcModal
|
||||
v-if="modal"
|
||||
size="small"
|
||||
class="cm-settings-form-appsort-modal"
|
||||
@close="closeModal"
|
||||
>
|
||||
<div class="modal__content">
|
||||
<draggable
|
||||
v-model="apps"
|
||||
item-key="id"
|
||||
@end="update"
|
||||
>
|
||||
{{ t('side_menu', 'Close') }}
|
||||
</NcButton>
|
||||
<template #item="{ element }">
|
||||
<div class="cm-settings-form-draggable">
|
||||
<span class="cm-settings-form-arrow">⇅</span>
|
||||
{{ element.name }}
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
|
||||
<div class="modal__footer">
|
||||
<NcButton
|
||||
variant="primary"
|
||||
@click="closeModal"
|
||||
>
|
||||
{{ t('side_menu', 'Close') }}
|
||||
</NcButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NcModal>
|
||||
</NcModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -111,26 +114,3 @@ onMounted(async () => {
|
|||
}, 500)
|
||||
})
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -15,46 +15,49 @@ 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>
|
||||
<NcButton
|
||||
aria-label="t('side_menu', 'Sort')"
|
||||
variant="primary"
|
||||
@click="openModal"
|
||||
>
|
||||
{{ t('side_menu', 'Sort') }}
|
||||
</NcButton>
|
||||
<div class="cm-settings-form-catsort">
|
||||
<NcButton
|
||||
aria-label="t('side_menu', 'Sort')"
|
||||
variant="primary"
|
||||
@click="openModal"
|
||||
>
|
||||
{{ t('side_menu', 'Sort') }}
|
||||
</NcButton>
|
||||
|
||||
<NcModal
|
||||
v-if="modal"
|
||||
size="small"
|
||||
@close="closeModal"
|
||||
>
|
||||
<div class="modal__content">
|
||||
<draggable
|
||||
v-model="apps"
|
||||
item-key="categoryId"
|
||||
@end="update"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<div
|
||||
v-if="element.name !== ''"
|
||||
class="draggable"
|
||||
>
|
||||
<span class="arrow">⇅</span>
|
||||
{{ element.name }}
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
|
||||
<div class="modal__footer">
|
||||
<NcButton
|
||||
variant="primary"
|
||||
@click="closeModal"
|
||||
<NcModal
|
||||
v-if="modal"
|
||||
size="small"
|
||||
class="cm-settings-form-catsort-modal"
|
||||
@close="closeModal"
|
||||
>
|
||||
<div class="modal__content">
|
||||
<draggable
|
||||
v-model="apps"
|
||||
item-key="categoryId"
|
||||
@end="update"
|
||||
>
|
||||
{{ t('side_menu', 'Close') }}
|
||||
</NcButton>
|
||||
<template #item="{ element }">
|
||||
<div
|
||||
v-if="element.name !== ''"
|
||||
class="cm-settings-form-draggable"
|
||||
>
|
||||
<span class="cm-settings-form-arrow">⇅</span>
|
||||
{{ element.name }}
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
|
||||
<div class="modal__footer">
|
||||
<NcButton
|
||||
variant="primary"
|
||||
@click="closeModal"
|
||||
>
|
||||
{{ t('side_menu', 'Close') }}
|
||||
</NcButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NcModal>
|
||||
</NcModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -114,26 +117,3 @@ onMounted(async () => {
|
|||
}, 500)
|
||||
})
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -17,11 +17,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<template>
|
||||
<NcColorPicker
|
||||
v-model="model"
|
||||
class="side-menu-setting-color-picker"
|
||||
class="cm-settings-form-colorpicker"
|
||||
>
|
||||
<div
|
||||
:style="{ 'background-color': model }"
|
||||
class="side-menu-setting-color-picker-value"
|
||||
class="cm-settings-form-colorpicker-value"
|
||||
/>
|
||||
</NcColorPicker>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,51 +1,50 @@
|
|||
<template>
|
||||
<NcButton
|
||||
:variant="is(false, false, false) ? 'primary' : 'seconday'"
|
||||
@click="update(false, false, false)"
|
||||
>
|
||||
{{ t('side_menu', 'Default') }}
|
||||
</NcButton>
|
||||
<NcButton
|
||||
:variant="is(true, false, false) ? 'primary' : 'seconday'"
|
||||
@click="update(true, false, false)"
|
||||
>
|
||||
{{ t('side_menu', 'Always displayed') }}
|
||||
</NcButton>
|
||||
<NcButton
|
||||
:variant="is(false, true, false) ? 'primary' : 'seconday'"
|
||||
@click="update(false, true, false)"
|
||||
>
|
||||
{{ t('side_menu', 'Big menu') }}
|
||||
</NcButton>
|
||||
<NcButton
|
||||
:variant="is(false, false, true) ? 'primary' : 'seconday'"
|
||||
@click="update(false, false, true)"
|
||||
>
|
||||
{{ t('side_menu', 'With categories') }}
|
||||
</NcButton>
|
||||
<div class="cm-settings-form-displaypicker">
|
||||
<NcButton
|
||||
:variant="is(false, false, false) ? 'primary' : 'seconday'"
|
||||
@click="update(false, false, false)"
|
||||
>
|
||||
{{ t('side_menu', 'Default') }}
|
||||
</NcButton>
|
||||
<NcButton
|
||||
:variant="is(true, false, false) ? 'primary' : 'seconday'"
|
||||
@click="update(true, false, false)"
|
||||
>
|
||||
{{ t('side_menu', 'Always displayed') }}
|
||||
</NcButton>
|
||||
<NcButton
|
||||
:variant="is(false, true, false) ? 'primary' : 'seconday'"
|
||||
@click="update(false, true, false)"
|
||||
>
|
||||
{{ t('side_menu', 'Big menu') }}
|
||||
</NcButton>
|
||||
<NcButton
|
||||
:variant="is(false, false, true) ? 'primary' : 'seconday'"
|
||||
@click="update(false, false, true)"
|
||||
>
|
||||
{{ t('side_menu', 'With categories') }}
|
||||
</NcButton>
|
||||
|
||||
<p>
|
||||
<img
|
||||
v-if="is(false, false, false)"
|
||||
class="side-menu-display"
|
||||
:src="DefaultImg"
|
||||
/>
|
||||
<img
|
||||
v-if="is(true, false, false)"
|
||||
class="side-menu-display"
|
||||
:src="AlwaysDisplayedImg"
|
||||
/>
|
||||
<img
|
||||
v-if="is(false, true, false)"
|
||||
class="side-menu-display"
|
||||
:src="TopWideImg"
|
||||
/>
|
||||
<img
|
||||
v-if="is(false, false, true)"
|
||||
class="side-menu-display"
|
||||
:src="SideMenuWithCategoriesImg"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<img
|
||||
v-if="is(false, false, false)"
|
||||
:src="DefaultImg"
|
||||
/>
|
||||
<img
|
||||
v-if="is(true, false, false)"
|
||||
:src="AlwaysDisplayedImg"
|
||||
/>
|
||||
<img
|
||||
v-if="is(false, true, false)"
|
||||
class="side-menu-display"
|
||||
:src="TopWideImg"
|
||||
/>
|
||||
<img
|
||||
v-if="is(false, false, true)"
|
||||
:src="SideMenuWithCategoriesImg"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { NcButton } from '@nextcloud/vue'
|
||||
|
|
@ -82,14 +81,3 @@ const is = (isAlwayDisplayed, isTopWideMenu, isSideMenuWithCategories) => {
|
|||
return isAlwayDisplayed === alwaysDisplayed && isTopWideMenu === topWideMenu && isSideMenuWithCategories === sideMenuWithCategories
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
button {
|
||||
display: inline-block !important;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
-->
|
||||
<template>
|
||||
<FormSelect
|
||||
class="cm-settings-form-opener"
|
||||
v-model="model"
|
||||
:options="options"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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/>.
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<em v-if="prepend">{{ t('side_menu', prepend) }}</em>
|
||||
<div class="cm-settings-form-range">
|
||||
<em
|
||||
class="cm-settings-form-range-prepend"
|
||||
v-if="prepend"
|
||||
>{{ t('side_menu', prepend) }}</em
|
||||
>
|
||||
|
||||
<input
|
||||
v-model="model"
|
||||
|
|
@ -25,7 +29,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
: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>
|
||||
</template>
|
||||
|
||||
|
|
@ -55,18 +63,3 @@ defineProps({
|
|||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
input {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
div * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
em + input,
|
||||
input + em {
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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/>.
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div class="cm-settings-form-select">
|
||||
<template v-if="!expanded">
|
||||
<select
|
||||
v-if="!expanded"
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
-->
|
||||
<template>
|
||||
<FormSelect
|
||||
class="cm-settings-form-size"
|
||||
v-model="model"
|
||||
:options="options"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
-->
|
||||
<template>
|
||||
<NcCheckboxRadioSwitch
|
||||
class="cm-settings-form-yesno"
|
||||
v-model="model"
|
||||
type="switch"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -19,23 +19,22 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
v-if="config"
|
||||
app-name="side_menu"
|
||||
>
|
||||
<NcAppContent class="side-menu-setting-app">
|
||||
<div class="side-menu-setting">
|
||||
<NcButton
|
||||
v-for="item in menu"
|
||||
:key="item.label"
|
||||
:variant="item.section === section ? 'primary' : 'secondary'"
|
||||
@click="setSection(item.section)"
|
||||
>{{ trans(item.label) }}</NcButton
|
||||
>
|
||||
</div>
|
||||
|
||||
<TableContainer :class="sectionClass('panel')">
|
||||
<NcAppNavigation class="cm-settings-nav">
|
||||
<NcAppNavigationItem
|
||||
v-for="item in menu"
|
||||
:key="item.label"
|
||||
:name="item.label"
|
||||
:active="item.section === section"
|
||||
@click="setSection(item.section)"
|
||||
>
|
||||
</NcAppNavigationItem>
|
||||
</NcAppNavigation>
|
||||
<NcAppContent class="cm-settings cm-settings--nav">
|
||||
<SettingsSection :class="sectionClass('panel')">
|
||||
<SectionTitle label="Panel" />
|
||||
|
||||
<TableRow>
|
||||
<TableLabel label="Display" />
|
||||
<TableValue>
|
||||
<SettingItem>
|
||||
<SettingValue>
|
||||
<FormDisplayPicker
|
||||
:always-displayed="config['always-displayed']"
|
||||
: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:side-menu-with-categories="(value) => (config['side-with-categories'] = value)"
|
||||
/>
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableRow :disabled="config['big-menu'] || config['always-displayed'] || config['side-with-categories']">
|
||||
<TableLabel
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
<SettingItem :disabled="config['big-menu'] || config['always-displayed'] || config['side-with-categories']">
|
||||
<SettingLabel
|
||||
label="Display the logo"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormYesNo v-model="config['display-logo']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableRow :disabled="config['big-menu'] || config['always-displayed'] || config['side-with-categories']">
|
||||
<TableLabel
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
<SettingItem :disabled="config['big-menu'] || config['always-displayed'] || config['side-with-categories']">
|
||||
<SettingLabel
|
||||
label="Use the avatar instead of the logo"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormYesNo v-model="config['use-avatar']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableRow :disabled="config['big-menu'] || config['always-displayed'] || config['side-with-categories']">
|
||||
<TableLabel
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
<SettingItem :disabled="config['big-menu'] || config['always-displayed'] || config['side-with-categories']">
|
||||
<SettingLabel
|
||||
label="The logo is a link to the default app"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormYesNo v-model="config['add-logo-link']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Show the link to settings"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormYesNo v-model="config['show-settings']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Icons"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormSize v-model="config['size-icon']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Texts"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormSize v-model="config['size-text']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
<AdminSaveButton :config="config" />
|
||||
</TableContainer>
|
||||
</SettingsSection>
|
||||
|
||||
<TableContainer :class="sectionClass('topMenu')">
|
||||
<SettingsSection :class="sectionClass('topMenu')">
|
||||
<SectionTitle label="Top menu" />
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Applications kept in the top menu"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormAppPicker v-model="config['top-menu-apps']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Applications kept in the top menu but also shown in side menu"
|
||||
help="These applications must be selected in the previous option."
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormAppPicker v-model="config['top-side-menu-apps']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Hide labels on mouse over"
|
||||
:top="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormSelect
|
||||
v-model="config['top-menu-mouse-over-hidden-label']"
|
||||
: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' },
|
||||
]"
|
||||
/>
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
<AdminSaveButton :config="config" />
|
||||
</TableContainer>
|
||||
</SettingsSection>
|
||||
|
||||
<TableContainer :class="sectionClass('apps')">
|
||||
<SettingsSection :class="sectionClass('apps')">
|
||||
<SectionTitle label="Applications" />
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Apps that should not be displayed in the menu"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormAppPicker v-model="config['big-menu-hidden-apps']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Open apps in new tab"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormAppPicker v-model="config['target-blank-apps']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Customize sorting"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormAppSort v-model="config['apps-order']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
<AdminSaveButton :config="config" />
|
||||
</TableContainer>
|
||||
</SettingsSection>
|
||||
|
||||
<TableContainer :class="sectionClass('cats')">
|
||||
<SettingsSection :class="sectionClass('cats')">
|
||||
<SectionTitle label="Categories" />
|
||||
|
||||
<TableRow :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])">
|
||||
<TableLabel
|
||||
<SettingItem :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])">
|
||||
<SettingLabel
|
||||
label="Order by"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormSelect
|
||||
v-model="config['categories-order-type']"
|
||||
:options="[
|
||||
|
|
@ -196,24 +195,24 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
{ id: 'custom', label: 'Custom' },
|
||||
]"
|
||||
/>
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableRow :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])">
|
||||
<TableLabel
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
<SettingItem :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])">
|
||||
<SettingLabel
|
||||
label="Customize sorting"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormCatSort v-model="config['categories-order']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableRow :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])">
|
||||
<TableLabel
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
<SettingItem :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])">
|
||||
<SettingLabel
|
||||
label="Customize application categories"
|
||||
:top="true"
|
||||
>
|
||||
</TableLabel>
|
||||
<TableValue>
|
||||
</SettingLabel>
|
||||
<SettingValue>
|
||||
<FormAppCategory
|
||||
:langs="config['langs']"
|
||||
: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:apps-categories-custom="(value) => (config['apps-categories-custom'] = value)"
|
||||
/>
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
|
||||
<AdminSaveButton :config="config" />
|
||||
</TableContainer>
|
||||
</SettingsSection>
|
||||
|
||||
<TableContainer :class="sectionClass('opener')">
|
||||
<SettingsSection :class="sectionClass('opener')">
|
||||
<SectionTitle label="Opener" />
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Opener"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormOpener v-model="config['opener']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Dark mode opener"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormOpener v-model="config['dark-mode-opener']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Position"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormSelect
|
||||
v-model="config['opener-position']"
|
||||
:options="[
|
||||
|
|
@ -261,38 +260,38 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
{ id: 'after', label: 'After the logo' },
|
||||
]"
|
||||
/>
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Show only the opener (hidden logo)"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormYesNo v-model="config['opener-only']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Open the menu when the mouse is hover the opener (automatically disabled on touch screens)"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormYesNo v-model="config['opener-hover']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
<AdminSaveButton :config="config" />
|
||||
</TableContainer>
|
||||
</SettingsSection>
|
||||
|
||||
<TableContainer :class="sectionClass('colors')">
|
||||
<SettingsSection :class="sectionClass('colors')">
|
||||
<SectionTitle label="Colors" />
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Background color"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormColorPicker v-model="config['background-color']" />
|
||||
<FormColorPicker v-model="config['background-color-to']" />
|
||||
<FormRange
|
||||
|
|
@ -300,45 +299,45 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
prepend="Transparent"
|
||||
append="Opaque"
|
||||
/>
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Background color of current app"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormColorPicker v-model="config['current-app-background-color']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Text color"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormColorPicker v-model="config['text-color']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Loader"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormColorPicker v-model="config['loader-color']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Icon"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormRange
|
||||
v-model="config['icon-invert-filter']"
|
||||
prepend="Same color"
|
||||
|
|
@ -349,17 +348,17 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
prepend="Transparent"
|
||||
append="Opaque"
|
||||
/>
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
|
||||
<SectionTitle label="Dark mode colors" />
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Background color"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormColorPicker v-model="config['dark-mode-background-color']" />
|
||||
<FormColorPicker v-model="config['dark-mode-background-color-to']" />
|
||||
<FormRange
|
||||
|
|
@ -367,45 +366,45 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
prepend="Transparent"
|
||||
append="Opaque"
|
||||
/>
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Background color of current app"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormColorPicker v-model="config['dark-mode-current-app-background-color']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Text color"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormColorPicker v-model="config['dark-mode-text-color']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Loader"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormColorPicker v-model="config['dark-mode-loader-color']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Icon"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormRange
|
||||
v-model="config['dark-mode-icon-invert-filter']"
|
||||
prepend="Same color"
|
||||
|
|
@ -416,60 +415,60 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
prepend="Transparent"
|
||||
append="Opaque"
|
||||
/>
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
<AdminSaveButton :config="config" />
|
||||
</TableContainer>
|
||||
</SettingsSection>
|
||||
|
||||
<TableContainer :class="sectionClass('global')">
|
||||
<p class="side-menu-tips">
|
||||
<SettingsSection :class="sectionClass('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>
|
||||
|
||||
<SectionTitle label="Global" />
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="The menu is enabled by default for users"
|
||||
help="Except when the configuration is forced."
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormYesNo v-model="config['default-enabled']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Force this configuration to users"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormYesNo v-model="config['force']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Loader enabled"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormYesNo v-model="config['loader-enabled']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
<AdminSaveButton :config="config" />
|
||||
</TableContainer>
|
||||
</SettingsSection>
|
||||
|
||||
<TableContainer :class="sectionClass('support')">
|
||||
<SettingsSection :class="sectionClass('support')">
|
||||
<SectionTitle label="Support" />
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="You like this app and you want to support me?"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<a
|
||||
target="_blank"
|
||||
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>
|
||||
</a>
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
|
||||
<TableRow>
|
||||
<TableLabel label="Need help" />
|
||||
<TableValue class="button-inline">
|
||||
<SettingItem>
|
||||
<SettingLabel label="Need help" />
|
||||
<SettingValue class="button-inline">
|
||||
<a
|
||||
target="_blank"
|
||||
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>
|
||||
</a>
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="I would like a new feature"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<a
|
||||
target="_blank"
|
||||
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>
|
||||
</a>
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Something went wrong"
|
||||
:top="true"
|
||||
/>
|
||||
<TableValue class="button-inline">
|
||||
<SettingValue class="button-inline">
|
||||
<a
|
||||
target="_blank"
|
||||
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>
|
||||
</NcModal>
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
<AdminSaveButton :config="config" />
|
||||
</TableContainer>
|
||||
</SettingsSection>
|
||||
</NcAppContent>
|
||||
</NcContent>
|
||||
</template>
|
||||
|
||||
<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 { useConfigStore } from '../store/config.js'
|
||||
|
||||
import TableContainer from '../components/settings/TableContainer'
|
||||
import TableRow from '../components/settings/TableRow'
|
||||
import TableLabel from '../components/settings/TableLabel'
|
||||
import TableValue from '../components/settings/TableValue'
|
||||
import SettingsSection from '../components/settings/SettingsSection'
|
||||
import SettingItem from '../components/settings/SettingItem'
|
||||
import SettingLabel from '../components/settings/SettingLabel'
|
||||
import SettingValue from '../components/settings/SettingValue'
|
||||
import SectionTitle from '../components/settings/SectionTitle'
|
||||
import AdminSaveButton from '../components/settings/AdminSaveButton'
|
||||
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'
|
||||
|
||||
const menu = [
|
||||
{ label: 'Global', section: 'global' },
|
||||
{ label: 'Panel', section: 'panel' },
|
||||
{ label: 'Colors', section: 'colors' },
|
||||
{ label: 'Opener', section: 'opener' },
|
||||
{ label: 'Applications', section: 'apps' },
|
||||
{ label: 'Categories', section: 'cats' },
|
||||
{ label: 'Top menu', section: 'topMenu' },
|
||||
{ label: 'Support', section: 'support' },
|
||||
{ label: 'Global', section: 'global', icon: '' },
|
||||
{ label: 'Panel', section: 'panel', icon: '' },
|
||||
{ label: 'Colors', section: 'colors', icon: '' },
|
||||
{ label: 'Opener', section: 'opener', icon: '' },
|
||||
{ label: 'Applications', section: 'apps', icon: '' },
|
||||
{ label: 'Categories', section: 'cats', icon: '' },
|
||||
{ label: 'Top menu', section: 'topMenu', icon: '' },
|
||||
{ label: 'Support', section: 'support', icon: '' },
|
||||
]
|
||||
|
||||
const config = ref(null)
|
||||
|
|
|
|||
|
|
@ -21,55 +21,55 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
>
|
||||
<NcAppContent
|
||||
v-if="config['force']"
|
||||
class="side-menu-setting-app"
|
||||
class="cm-settings"
|
||||
>
|
||||
<TableContainer>
|
||||
<TableLabel label="You do not have permission to change the settings." />
|
||||
</TableContainer>
|
||||
<SettingsSection>
|
||||
<SettingLabel label="You do not have permission to change the settings." />
|
||||
</SettingsSection>
|
||||
</NcAppContent>
|
||||
<NcAppContent
|
||||
v-else
|
||||
class="side-menu-setting-app side-menu-setting-app--user"
|
||||
class="cm-settings"
|
||||
>
|
||||
<TableContainer>
|
||||
<SettingsSection>
|
||||
<SectionTitle label="Menu" />
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Enable the custom menu"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormYesNo v-model="config['enabled']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Applications kept in the top menu"
|
||||
help="If there is no selection then the global configuration is applied."
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormAppPicker v-model="config['top-menu-apps']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Applications kept in the top menu but also shown in side menu"
|
||||
help="These applications must be selected in the previous option."
|
||||
help2="If there is no selection then the global configuration is applied"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormAppPicker v-model="config['top-side-menu-apps']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Open apps in new tab"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormSelect
|
||||
v-model="config['target-blank-mode']"
|
||||
: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-model="config['target-blank-apps']"
|
||||
/>
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="Customize sorting"
|
||||
:top="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<FormAppSort v-model="config['apps-order']" />
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</TableContainer>
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
</SettingsSection>
|
||||
|
||||
<TableContainer>
|
||||
<SettingsSection>
|
||||
<SectionTitle label="Support" />
|
||||
|
||||
<TableRow>
|
||||
<TableLabel
|
||||
<SettingItem>
|
||||
<SettingLabel
|
||||
label="You like this app and you want to support me?"
|
||||
:middle="true"
|
||||
/>
|
||||
<TableValue>
|
||||
<SettingValue>
|
||||
<a
|
||||
target="_blank"
|
||||
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>
|
||||
</a>
|
||||
</TableValue>
|
||||
</TableRow>
|
||||
</SettingValue>
|
||||
</SettingItem>
|
||||
|
||||
<UserSaveButton :config="config" />
|
||||
</TableContainer>
|
||||
</SettingsSection>
|
||||
</NcAppContent>
|
||||
</NcContent>
|
||||
</template>
|
||||
|
|
@ -124,10 +124,10 @@ import { NcContent, NcAppContent, NcButton } from '@nextcloud/vue'
|
|||
import { ref, onMounted } from 'vue'
|
||||
import { useConfigStore } from '../store/config.js'
|
||||
|
||||
import TableContainer from '../components/settings/TableContainer'
|
||||
import TableRow from '../components/settings/TableRow'
|
||||
import TableLabel from '../components/settings/TableLabel'
|
||||
import TableValue from '../components/settings/TableValue'
|
||||
import SettingsSection from '../components/settings/SettingsSection'
|
||||
import SettingItem from '../components/settings/SettingItem'
|
||||
import SettingLabel from '../components/settings/SettingLabel'
|
||||
import SettingValue from '../components/settings/SettingValue'
|
||||
import SectionTitle from '../components/settings/SectionTitle'
|
||||
import UserSaveButton from '../components/settings/UserSaveButton'
|
||||
import FormYesNo from '../components/settings/form/FormYesNo'
|
||||
|
|
|
|||
|
|
@ -15,144 +15,209 @@
|
|||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
#side-menu-section input[type='color'] {
|
||||
width: 100px;
|
||||
margin: 10px 0 10px 0;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#-dropside-menu-section input[type='checkbox'] {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#side-menu-section input[type='range'] {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#side-menu-section select {
|
||||
margin: 10px 0 10px 0;
|
||||
}
|
||||
|
||||
.keyboard-key {
|
||||
padding: 1px 9px;
|
||||
margin: 0 2px;
|
||||
background: #eee;
|
||||
border: 1px solid #aaa;
|
||||
color: #555;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.side-menu-display {
|
||||
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%;
|
||||
.cm-settings {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.side-menu-setting-row {
|
||||
display: table;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&--disabled {
|
||||
opacity: 0.5;
|
||||
&--nav {
|
||||
padding-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.side-menu-setting-label {
|
||||
display: table-cell;
|
||||
width: 430px;
|
||||
max-width: 30vw;
|
||||
padding-right: 20px;
|
||||
}
|
||||
&-nav {
|
||||
.app-navigation__content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.side-menu-setting-label--top {
|
||||
vertical-align: top;
|
||||
}
|
||||
.app-navigation-entry-icon {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.side-menu-setting-label--middle {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.app-navigation-entry__name {
|
||||
padding-left: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.side-menu-setting-form {
|
||||
display: table-cell;
|
||||
min-width: 300px;
|
||||
max-width: 40vw;
|
||||
}
|
||||
&-tips {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.side-menu-setting-label-short {
|
||||
width: 300px;
|
||||
}
|
||||
&-section {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.side-menu-setting-form-long {
|
||||
width: 400px;
|
||||
&-item {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&--disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&-label {
|
||||
max-width: 350px;
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
|
||||
&--short {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
&--top {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&--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;
|
||||
}
|
||||
|
||||
em + input,
|
||||
input + em {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&-catsort-modal {
|
||||
.modal__footer {
|
||||
padding: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.modal__footer button {
|
||||
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) {
|
||||
|
|
@ -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 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.side-menu-tips {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue