Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/settings styles [WTEL-4814] #736

Merged
merged 4 commits into from
Aug 2, 2024
Merged

Fix/settings styles [WTEL-4814] #736

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ef38cef
fix: changed styles for settings and settings components [WTEL-4814]
liza-pohranichna Jul 30, 2024
a778d49
Merge branch 'master' into fix/settings-styles
liza-pohranichna Jul 30, 2024
92d5ed8
fix: remove v-model in settings after review [WTEL-4814]
liza-pohranichna Jul 31, 2024
28168ee
fix: change styles after review [WTEL-4816]
liza-pohranichna Aug 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion src/modules/settings/components/change-password.vue
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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">
<!--This wrapper is needed to set height and place the settings-section-items
in 2 columns and have flexible background for this at the same time-->
<div class="settings-section__content">
<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>
<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;

&__setting {
&__content {
display: flex;
flex-direction: column;
margin-bottom: var(--spacing-sm);
flex-wrap: wrap;
max-height: 650px; // we need it to place blocks in 2 columns and have flexible background for this at the same time
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

це Женя сказав таку висоту поставити захардкодити, та?

gap: var(--spacing-sm);
}

&-item {
display: flex;
flex-direction: column;
width: calc(50% - var(--spacing-sm));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

а чому б замість цього грідом не скористатись на перенті?

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
Loading