Skip to content

Commit

Permalink
Merge pull request #736 from webitel/fix/settings-styles
Browse files Browse the repository at this point in the history 
Fix/settings styles [WTEL-4814]
  • Loading branch information
@dlohvinov
dlohvinov authored Aug 2, 2024
2 parents ac7b5c3 + 28168ee commit 831868e
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 81 deletions.
10 changes: 9 additions & 1 deletion src/modules/settings/components/change-password.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<article class="change-password">
<article class="change-password settings-section-item">
<header class="content-header">
<h3 class="content-title">
{{ $t('settings.changePassword') }}
Expand Down Expand Up @@ -86,6 +86,14 @@ async function changePassword() {

<style lang="scss" scoped>
.change-password {
.content-title {
@extend %typo-heading-4;
}
}
.wt-button {
display: block;
margin: 0 0 0 auto;
}
</style>
29 changes: 20 additions & 9 deletions src/modules/settings/components/custom-ringtone.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<section class="custom-ringtone settings-section__setting">
<section class="custom-ringtone settings-section-item">
<header class="content-header">
<h3 class="content-title">
{{ $t('settings.ringtones.title') }}
Expand Down Expand Up @@ -92,15 +92,26 @@ export default {
</script>
<style lang="scss" scoped>
.custom-ringtone__wrapper {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.custom-ringtone {
&__wrapper {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.content-title {
@extend %typo-heading-4;
}
.wt-button {
display: block;
margin: 0 0 0 auto;
}
.wt-button {
display: block;
margin: 0 0 0 auto;
.wt-player {
position: relative;
bottom: auto;
}
}
</style>
144 changes: 73 additions & 71 deletions src/modules/settings/components/the-settings.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,79 +6,78 @@
</wt-page-header>
</template>
<template #main>
<!--This wrapper "settings-section" is needed to place the "settings-section__setting"
in a column and give them half the width of the screen-->
<section class="settings-section">
<article class="settings-section__setting">
<div class="settings-section__column">
<change-password />
</article>
<section class="settings-section__setting">
<header class="content-header">
<h3 class="content-title">
{{ $t('settings.language') }}
</h3>
</header>
<form>
<wt-select
:label="$t('settings.language')"
:options="languageOptions"
:value="language"
class="language-list"
@input="changeLanguage"
:clearable="false"
/>
</form>
</section>
<section class="settings-section__setting">
<header class="content-header">
<h3 class="content-title">
{{ $t('settings.webPhone') }}
</h3>
</header>
<form>
<div class="settings-section__wrapper settings-section__switcher">
<p>{{ $t('settings.useWebPhone') }}</p>
<wt-switcher
v-model="webrtc"
@change="changeWebrtc"
<section class="settings-section-item">
<header class="content-header">
<h3 class="content-title">
{{ $t('settings.language') }}
</h3>
</header>
<form>
<wt-select
:label="$t('settings.language')"
:options="languageOptions"
:value="language"
class="language-list"
@input="changeLanguage"
:clearable="false"
/>
</div>
<div
v-show="webrtc"
class="settings-section__wrapper"
>
<p>{{ $t('settings.useStun') }}</p>
<wt-switcher
v-model="stun"
@change="changeStun"
/>
</div>
</form>
</section>
<section class="settings-section__setting">
<header class="content-header">
<h3 class="content-title">
{{ $t('settings.callEnd') }}
</h3>
</header>
<form>
<div class="settings-section__wrapper">
<p>{{ $t('objects.status') }}</p>
<wt-switcher
:value="callEndSound"
@change="changeCallEndSoundState"
/>
</div>
</form>
</section>
<custom-ringtone />
</form>
</section>
<section class="settings-section-item">
<header class="content-header">
<h3 class="content-title">
{{ $t('settings.webPhone') }}
</h3>
</header>
<form>
<div class="settings-section__wrapper settings-section__switcher">
<p>{{ $t('settings.useWebPhone') }}</p>
<wt-switcher
:value="webrtc"
@change="changeWebrtc"
/>
</div>
<div
v-show="webrtc"
class="settings-section__wrapper"
>
<p>{{ $t('settings.useStun') }}</p>
<wt-switcher
:value="stun"
@change="changeStun"
/>
</div>
</form>
</section>
</div>
<div class="settings-section__column">
<section class="settings-section-item">
<header class="content-header">
<h3 class="content-title">
{{ $t('settings.callEnd') }}
</h3>
</header>
<form>
<div class="settings-section__wrapper">
<p>{{ $t('objects.status') }}</p>
<wt-switcher
:value="callEndSound"
@change="changeCallEndSoundState"
/>
</div>
</form>
</section>
<custom-ringtone />
</div>
</section>
</template>
</wt-page-wrapper>
</template>

<script>
import { required, sameAs } from '@vuelidate/validators';
import getNamespacedState from '@webitel/ui-sdk/src/store/helpers/getNamespacedState';
import { mapState } from 'vuex';
import { changeWebPhone, getWebPhone } from '../api/settings';
Expand Down Expand Up @@ -196,20 +195,23 @@ export default {

<style lang="scss" scoped>
.settings-section {
display: block;
columns: 2;
column-gap: var(--spacing-sm);
width: 100%;
min-width: 200px;
display: flex;
gap: var(--spacing-sm);
&__setting {
&__column {
display: flex;
flex-direction: column;
flex: 1;
gap: var(--spacing-sm);
}
&-item {
display: flex;
flex-direction: column;
margin-bottom: var(--spacing-sm);
padding: 0 var(--spacing-sm) var(--spacing-sm);
border-radius: var(--border-radius);
box-shadow: var(--elevation-5);
break-inside: avoid-column;
}
.content-title {
Expand Down

0 comments on commit 831868e

Please sign in to comment.