Skip to content

Commit c36c8b4

Browse files
ShGKmeShGKme
committed
fixup! fix(talk/settings): new design
Signed-off-by: Grigorii K. Shartsev <[email protected]>
1 parent 3ea5864 commit c36c8b4

File tree

4 files changed

+95
-58
lines changed

4 files changed

+95
-58
lines changed

‎src/talk/renderer/Settings/DesktopSettingsSection.vue‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ const secondarySpeakerDevice = useAppConfigValue('secondarySpeakerDevice')
7979

8080
<UiFormGroupZoom v-model="zoomFactor" />
8181

82-
<NcFormGroup :label="t('talk_desktop', 'Notifications and sounds')">
82+
<NcFormGroup :label="t('talk_desktop', 'Notifications & Sounds')">
8383
<NcFormBox>
8484
<UiFormBoxSelectNative v-model="playSoundChat" :label="t('talk_desktop', 'Play chat notification sound')" :options="notificationLevelOptions" />
8585
<UiFormBoxSelectNative v-model="playSoundCall" :label="t('talk_desktop', 'Play call notification sound')" :options="notificationLevelOptions" />
@@ -88,9 +88,8 @@ const secondarySpeakerDevice = useAppConfigValue('secondarySpeakerDevice')
8888

8989
<NcFormBox>
9090
<NcFormBoxSwitch v-model="secondarySpeaker" :label="t('talk_desktop', 'Also repeat call notification on a secondary speaker')" />
91+
<UiFormBoxAudioOutput v-if="secondarySpeaker" v-model="secondarySpeakerDevice" :label="t('talk_desktop', 'Secondary speaker')" />
9192
</NcFormBox>
92-
93-
<UiFormBoxAudioOutput v-if="secondarySpeaker" v-model="secondarySpeakerDevice" :label="t('talk_desktop', 'Secondary speaker')" />
9493
</NcFormGroup>
9594
</div>
9695
</template>

‎src/talk/renderer/Settings/components/UiFormBoxAudioOutput.vue‎

Lines changed: 18 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55

66
<script setup lang="ts">
77
import { t } from '@nextcloud/l10n'
8-
import NcButton from '@nextcloud/vue/components/NcButton'
98
import NcFormBox from '@nextcloud/vue/components/NcFormBox'
109
import IconRestore from 'vue-material-design-icons/Restore.vue'
1110
import UiFormBoxSelectNative from './UiFormBoxSelectNative.vue'
11+
import UiFormBoxSplitButton from './UiFormBoxSplitButton.vue'
1212
import { useAudioDevicesList } from './useAudioDevicesList.ts'
1313
1414
const modelValue = defineModel<string | null>({ required: true })
@@ -21,41 +21,37 @@ const { devices, reloadDevices } = useAudioDevicesList()
2121
</script>
2222

2323
<template>
24-
<NcFormBox v-slot="{ itemClass }" row>
24+
<NcFormBox class="audio-output" row>
2525
<UiFormBoxSelectNative
2626
v-model="modelValue"
27+
class="audio-output__select"
2728
:label
2829
:options="devices"
2930
:disabled="devices.length === 1" />
30-
<NcButton
31-
:aria-label="t('talk_desktop', 'Reload')"
32-
:title="t('talk_desktop', 'Reload')"
33-
variant="secondary"
34-
class="button--primary-light shrink"
35-
:class="itemClass"
31+
<UiFormBoxSplitButton
32+
class="audio-output__reset"
33+
:label="t('talk_desktop', 'Reload')"
34+
hide-label
3635
@click="reloadDevices">
3736
<template #icon>
3837
<IconRestore :size="20" />
3938
</template>
40-
</NcButton>
39+
</UiFormBoxSplitButton>
4140
</NcFormBox>
4241
</template>
4342

4443
<style scoped>
45-
.button--primary-light {
46-
--color-primary-element-extra-light: hsl(from var(--color-primary-element-light) h s calc(l * 1.045));
47-
--color-primary-element-extra-light-hover: hsl(from var(--color-primary-element-light-hover) h s calc(l * 1.045));
48-
background-color: var(--color-primary-element-extra-light);
49-
border-color: var(--color-primary-element-extra-light-hover);
50-
color: var(--color-primary-element-light-text);
51-
52-
&:hover:not(:disabled) {
53-
color: var(--color-primary-element-light-text);
54-
background-color: var(--color-primary-element-extra-light-hover);
44+
/* TODO: fix nested groups in upstream */
45+
.audio-output {
46+
.audio-output__select {
47+
border-start-start-radius: var(--border-radius-small) !important;
48+
border-start-end-radius: var(--border-radius-small) !important;
49+
border-end-end-radius: var(--border-radius-small) !important;
5550
}
56-
}
5751
58-
.shrink {
59-
flex: 0 1 auto;
52+
.audio-output__reset {
53+
border-start-end-radius: var(--border-radius-small) !important;
54+
border-end-start-radius: var(--border-radius-small) !important;
55+
}
6056
}
6157
</style>

‎src/talk/renderer/Settings/components/UiFormBoxSplitButton.vue‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!--
2+
- SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
3+
- SPDX-License-Identifier: AGPL-3.0-or-later
4+
-->
5+
6+
<script setup lang="ts">
7+
import type { Slot } from 'vue'
8+
9+
import NcFormBoxButton from '@nextcloud/vue/components/NcFormBoxButton'
10+
11+
defineProps<{
12+
label?: string
13+
hideLabel?: boolean
14+
}>()
15+
16+
defineEmits<{
17+
click: [event: MouseEvent]
18+
}>()
19+
20+
defineSlots<{
21+
default?: Slot
22+
icon?: Slot
23+
}>()
24+
</script>
25+
26+
<template>
27+
<NcFormBoxButton class="form-box-split-button" :class="{ 'form-box-split-button__no-gap': hideLabel || !$slots.icon }" @click="$emit('click', $event)">
28+
<span :class="{ 'hidden-visually': hideLabel } ">
29+
<slot>
30+
{{ label }}
31+
</slot>
32+
</span>
33+
<template #icon>
34+
<slot name="icon">
35+
<span><!-- dummy icon, prevent "icon is missing" --></span>
36+
</slot>
37+
</template>
38+
</NcFormBoxButton>
39+
</template>
40+
41+
<style scoped>
42+
.form-box-split-button {
43+
flex: 0 0 fit-content;
44+
}
45+
46+
.form-box-split-button__no-gap {
47+
gap: 0 !important;
48+
}
49+
</style>

‎src/talk/renderer/Settings/components/UiFormGroupZoom.vue‎

Lines changed: 26 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import NcFormGroup from '@nextcloud/vue/components/NcFormGroup'
1212
import NcTextField from '@nextcloud/vue/components/NcTextField'
1313
import IconMinus from 'vue-material-design-icons/Minus.vue'
1414
import IconPlus from 'vue-material-design-icons/Plus.vue'
15+
import UiFormBoxSplitButton from './UiFormBoxSplitButton.vue'
1516
1617
/** Zoom factor ~0.5..4 */
1718
const modelValue = defineModel<number>({ required: true })
@@ -84,23 +85,10 @@ async function onShowInput() {
8485
<span v-html="zoomHint" />
8586
</template>
8687

87-
<NcFormBox v-slot="{ itemClass }" class="zoom-box__row" row>
88-
<NcButton
89-
:class="itemClass"
90-
variant="tertiary"
91-
wide
92-
@click="modelValue = 1">
88+
<NcFormBox class="zoom-box__row" row>
89+
<UiFormBoxSplitButton @click="modelValue = 1">
9390
{{ t('talk_desktop', 'Reset') }}
94-
</NcButton>
95-
96-
<NcButton
97-
:aria-label="t('talk_desktop', 'Zoom out')"
98-
:class="itemClass"
99-
@click="modelValue /= STEP_FACTOR">
100-
<template #icon>
101-
<IconMinus :size="20" />
102-
</template>
103-
</NcButton>
91+
</UiFormBoxSplitButton>
10492

10593
<input
10694
v-model="rangeValue"
@@ -118,18 +106,15 @@ async function onShowInput() {
118106
<option v-for="step in STEPS" :key="step" :value="step" />
119107
</datalist>
120108

121-
<NcButton
122-
:aria-label="t('talk_desktop', 'Zoom in')"
123-
:class="itemClass"
124-
@click="modelValue *= STEP_FACTOR">
109+
<UiFormBoxSplitButton :label="t('talk_desktop', 'Zoom out')" hide-label @click="modelValue /= STEP_FACTOR">
125110
<template #icon>
126-
<IconPlus :size="20" />
111+
<IconMinus :size="20" />
127112
</template>
128-
</NcButton>
113+
</UiFormBoxSplitButton>
129114

130115
<NcButton
131116
v-if="!showInput"
132-
class="zoom-box__edit-button"
117+
class="form-box-split-button zoom-box__edit-button"
133118
:aria-description="t('talk_desktop', 'Edit zoom')"
134119
variant="tertiary"
135120
@click="onShowInput">
@@ -141,9 +126,16 @@ async function onShowInput() {
141126
:aria-label="t('talk_desktop', 'Zoom')"
142127
inputmode="number"
143128
class="zoom-box__edit"
129+
input-class="zoom-box__edit-input"
144130
:model-value="inputValue"
145131
@change="inputValue = $event.target.value /* TODO: add lazy modifier support */"
146132
@blur="showInput = false" />
133+
134+
<UiFormBoxSplitButton :label="t('talk_desktop', 'Zoom in')" hide-label @click="modelValue *= STEP_FACTOR">
135+
<template #icon>
136+
<IconPlus :size="20" />
137+
</template>
138+
</UiFormBoxSplitButton>
147139
</NcFormBox>
148140
</NcFormGroup>
149141
</template>
@@ -165,26 +157,27 @@ async function onShowInput() {
165157
font-family: var(--font-family); /* Design decision: looks better with the default font instead of mono */
166158
line-height: 1;
167159
white-space: nowrap;
168-
169-
& + :deep(.kbd) {
170-
margin-inline-start: calc(1 * var(--default-grid-baseline));
171-
}
172160
}
173-
}
174161
175-
.zoom-box__row > * {
176-
flex: 0 0 fit-content;
162+
:deep(.kbd + .kbd) {
163+
margin-inline-start: calc(1 * var(--default-grid-baseline));
164+
}
177165
}
178166
179167
.zoom-box__range {
180168
flex: 1 0;
181-
margin: 0;
182-
height: var(--default-clickable-area);
169+
margin-block: 0;
170+
margin-inline: var(--default-grid-baseline);
183171
accent-color: var(--color-primary-element);
184172
}
185173
186174
.zoom-box__edit,
187175
.zoom-box__edit-button {
188-
flex-basis: 75px;
176+
width: 75px;
177+
}
178+
179+
.zoom-box__edit {
180+
display: flex;
181+
align-items: center;
189182
}
190183
</style>

0 commit comments

Comments
 (0)