improve settings components and scss
This commit is contained in:
Simon Vieille
@@ -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) }}
|
||||
+1
-1
@@ -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"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user