archive/bramw_baserow
1
0
Fork 0
mirror of https://gitlab.com/bramw/baserow.git synced 2025-03-28 18:15:09 +00:00
Code Issues Projects Releases Wiki Activity

Introduced neutral switch color

Browse source
This commit is contained in:
Bram Wiepjes 2024-07-31 10:20:19 +00:00
parent 2d2b79b28c
commit 9e1abb9795
8 changed files with 117 additions and 35 deletions
changelog/entries/unreleased/feature
introduced_neutral_switch_color.json
web-frontend
modules/core
assets/scss
abstracts
_all.scss_switch.scss
components
switch_input.scss
components
SwitchInput.vue
pages
styleGuide.vue
stories
SwitchInput.stories.mdx
test/unit/database/components/view/__snapshots__
viewFilterForm.spec.js.snap

7
changelog/entries/unreleased/feature/introduced_neutral_switch_color.json Normal file
View file

@ -0,0 +1,7 @@
{
"type": "feature",
"message": "Introduced a neutral switch color.",
"issue_number": null,
"bullet_points": [],
"created_at": "2024-07-30"
}

1
web-frontend/modules/core/assets/scss/abstracts/_all.scss
View file

@ -5,3 +5,4 @@
@import 'button';
@import 'radio';
@import 'empty';
@import 'switch';

48
web-frontend/modules/core/assets/scss/abstracts/_switch.scss Normal file
View file

@ -0,0 +1,48 @@
@mixin switch-color(
$active-color,
$active-hover-color,
$indeterminate-color,
$indeterminate-hover-color,
$disabled-color,
$disabled-hover-color
) {
&::before {
background-color: $disabled-color;
}
&:hover {
&::before {
background-color: $disabled-hover-color;
}
}
&.switch--active {
&::before {
background-color: $active-color;
}
&:not(.switch--disabled):hover {
&::before {
background-color: $active-hover-color;
}
}
}
&.switch--indeterminate {
&::before {
background-color: $indeterminate-color;
}
&:not(.switch--disabled):hover {
&::before {
background-color: $indeterminate-hover-color;
}
}
}
&.switch--disabled {
&::before {
background-color: $disabled-color;
}
}
}

53
web-frontend/modules/core/assets/scss/components/switch_input.scss
View file

@ -14,17 +14,10 @@
content: '';
width: 40px;
height: 24px;
background-color: $palette-neutral-400;
@include rounded($rounded-xl);
}
&:hover {
&::before {
background-color: $palette-neutral-500;
}
}
&::after {
content: '';
border-radius: 100%;
@ -38,32 +31,12 @@
}
&.switch--active {
&::before {
background-color: $palette-green-500;
}
&:not(.switch--disabled):hover {
&::before {
background-color: $palette-green-800;
}
}
&::after {
left: 17px;
}
}
&.switch--indeterminate {
&::before {
background-color: $palette-yellow-500;
}
&:not(.switch--disabled):hover {
&::before {
background-color: $palette-yellow-800;
}
}
&::after {
left: 10px;
}
@ -72,10 +45,6 @@
&.switch--disabled {
cursor: not-allowed;
&::before {
background-color: $palette-neutral-400;
}
&::after {
box-shadow: none;
}
@ -105,6 +74,28 @@
}
}
.switch--color-green {
@include switch-color(
$palette-green-500,
$palette-green-800,
$palette-yellow-500,
$palette-yellow-800,
$palette-neutral-400,
$palette-neutral-500
);
}
.switch--color-neutral {
@include switch-color(
$palette-neutral-1200,
$palette-neutral-1300,
$palette-neutral-800,
$palette-neutral-900,
$palette-neutral-400,
$palette-neutral-500
);
}
.switch__label {
margin-left: 8px;
display: flex;

9
web-frontend/modules/core/components/SwitchInput.vue
View file

@ -32,6 +32,14 @@ export default {
required: false,
default: false,
},
color: {
type: String,
required: false,
validator: function (value) {
return ['green', 'neutral'].includes(value)
},
default: 'green',
},
},
computed: {
hasSlot() {
@ -43,6 +51,7 @@ export default {
'switch--disabled': this.disabled,
'switch--active': this.value,
'switch--indeterminate': this.value !== true && this.value !== false,
[`switch--color-${this.color}`]: true,
}
},
},

19
web-frontend/modules/core/pages/styleGuide.vue
View file

@ -190,6 +190,25 @@
>
Small disabled
</SwitchInput>
<SwitchInput
v-model="switchValue"
color="neutral"
class="margin-bottom-2"
>Neutral color</SwitchInput
>
<SwitchInput
v-model="switchUnknown"
color="neutral"
class="margin-bottom-2"
>Neutral intermediate</SwitchInput
>
<SwitchInput
v-model="switchValue"
color="neutral"
:disabled="true"
class="margin-bottom-2"
>Neutral disabled</SwitchInput
>
</FormGroup>
<FormGroup label="Dropdown" required class="margin-bottom-2">

9
web-frontend/stories/SwitchInput.stories.mdx
View file

@ -32,7 +32,7 @@ import SwitchInput from '@baserow/modules/core/components/SwitchInput'
value: {
control: {
type: 'radio',
options: [2, true, false],
options: ['intermediate state', true, false],
},
defaultValue: false,
},
@ -50,6 +50,13 @@ import SwitchInput from '@baserow/modules/core/components/SwitchInput'
},
defaultValue: false,
},
color: {
control: {
type: 'select',
options: ['green', 'neutral'],
},
defaultValue: 'green',
},
}}
/>

6
web-frontend/test/unit/database/components/view/__snapshots__/viewFilterForm.spec.js.snap
View file

@ -1208,7 +1208,7 @@ exports[`ViewFilterForm match snapshots Full view filter component 1`] = `
<div>
<div
class="switch switch--small"
class="switch switch--small switch--color-green"
>
<div
class="switch__label"
@ -1726,7 +1726,7 @@ exports[`ViewFilterForm match snapshots Test rating filter 1`] = `
<div>
<div
class="switch switch--small"
class="switch switch--small switch--color-green"
>
<div
class="switch__label"
@ -2244,7 +2244,7 @@ exports[`ViewFilterForm match snapshots Test rating filter 2`] = `
<div>
<div
class="switch switch--small"
class="switch switch--small switch--color-green"
>
<div
class="switch__label"