YunoHost/yunohost-admin
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-admin.git synced 2024-09-03 20:06:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix: buttons should not be rotated + rename prop collapsable -> collapsible

Browse source
This commit is contained in:
axolotle 2024-08-17 00:55:02 +02:00
parent 4c9938e23f
commit 55d81708c1
6 changed files with 20 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/src/components/globals/YCard.vue
View file

@ -10,7 +10,7 @@ const props = withDefaults(
title?: string title?: string
titleTag?: string titleTag?: string
icon?: string icon?: string
collapsable?: boolean collapsible?: boolean
collapsed?: boolean collapsed?: boolean
buttonUnbreak?: Breakpoint buttonUnbreak?: Breakpoint
}>(), }>(),
@ -21,7 +21,7 @@ const props = withDefaults(
title: undefined, title: undefined,
titleTag: 'h2', titleTag: 'h2',
icon: undefined, icon: undefined,
collapsable: false, collapsible: false,
collapsed: false, collapsed: false,
buttonUnbreak: 'md', buttonUnbreak: 'md',
}, },
@ -39,7 +39,7 @@ const visible = ref(!props.collapsed)
</script> </script>
<template> <template>
<BCard :no-body="collapsable ? true : noBody" :class="{ 'border-0': asTab }"> <BCard :no-body="collapsible ? true : noBody" :class="{ 'border-0': asTab, 'collapsible': collapsible }">
<template v-if="!asTab" #header> <template v-if="!asTab" #header>
<div class="w-100 d-flex align-items-center flex-wrap custom-header"> <div class="w-100 d-flex align-items-center flex-wrap custom-header">
<slot name="header"> <slot name="header">
@ -62,7 +62,7 @@ const visible = ref(!props.collapsed)
</div> </div>
<BButton <BButton
v-if="collapsable" v-if="collapsible"
size="sm" size="sm"
variant="outline-secondary" variant="outline-secondary"
class="align-self-center ms-auto" class="align-self-center ms-auto"
@ -78,7 +78,7 @@ const visible = ref(!props.collapsed)
</BButton> </BButton>
</template> </template>
<BCollapse v-if="collapsable" :visible="visible"> <BCollapse v-if="collapsible" :visible="visible">
<slot v-if="noBody" name="default" /> <slot v-if="noBody" name="default" />
<BCardBody v-else> <BCardBody v-else>
<slot name="default" /> <slot name="default" />

8
app/src/scss/main.scss
View file

@ -222,13 +222,15 @@ h3.card-title {
} }
// collapse icon // collapse icon
.not-collapsed > .icon { .collapsible {
.not-collapsed > .icon {
transform: rotate(-90deg); transform: rotate(-90deg);
} }
.collapsed > .icon { .collapsed > .icon {
transform: rotate(90deg); transform: rotate(90deg);
position: relative; position: relative;
top: 2px; top: 2px;
}
} }
// limit the size of toggle dropdown buttons to a square // limit the size of toggle dropdown buttons to a square

4
app/src/views/app/_AppIntegrationAndLinks.vue
View file

@ -12,7 +12,7 @@ defineProps<{
v-if="integration" v-if="integration"
id="app-integration" id="app-integration"
:title="$t('app.integration.title')" :title="$t('app.integration.title')"
collapsable collapsible
collapsed collapsed
no-body no-body
> >
@ -45,7 +45,7 @@ defineProps<{
id="app-links" id="app-links"
icon="link" icon="link"
:title="$t('app.links.title')" :title="$t('app.links.title')"
collapsable collapsible
collapsed collapsed
no-body no-body
> >

2
app/src/views/diagnosis/DiagnosisView.vue
View file

@ -117,7 +117,7 @@ function shareLogs() {
<YCard <YCard
v-for="report in reports" v-for="report in reports"
:key="report.id" :key="report.id"
collapsable collapsible
:collapsed="report.noIssues" :collapsed="report.noIssues"
no-body no-body
button-unbreak="lg" button-unbreak="lg"

4
app/src/views/group/GroupList.vue
View file

@ -168,7 +168,7 @@ async function deleteGroup(name: string) {
<YCard <YCard
v-for="group in filteredGroups" v-for="group in filteredGroups"
:key="group.name" :key="group.name"
collapsable collapsible
:title=" :title="
group.isSpecial group.isSpecial
? $t('group_' + group.name) ? $t('group_' + group.name)
@ -239,7 +239,7 @@ async function deleteGroup(name: string) {
</YCard> </YCard>
<!-- USER GROUPS CARD --> <!-- USER GROUPS CARD -->
<YCard collapsable :title="$t('group_specific_permissions')" icon="group"> <YCard collipsable :title="$t('group_specific_permissions')" icon="group">
<template v-for="userName in activeUserGroups" :key="userName"> <template v-for="userName in activeUserGroups" :key="userName">
<BRow> <BRow>
<BCol md="3" lg="2"> <BCol md="3" lg="2">

2
app/src/views/tool/ToolMigrations.vue
View file

@ -123,7 +123,7 @@ async function skipMigration(id: string) {
<YCard <YCard
:title="$t('migrations_done')" :title="$t('migrations_done')"
icon="cogs" icon="cogs"
collapsable collapsible
collapsed collapsed
no-body no-body
> >