KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: Update the design for dropdown buttons (#5625)

Browse source
This commit is contained in:
Nithin David Thomas 2022-10-14 02:06:42 +05:30 committed by GitHub
parent bf4338ef9e
commit 1f271356ca
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 57 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
app/javascript/dashboard/assets/scss/widgets/_buttons.scss
View file

@ -113,9 +113,22 @@ $default-button-height: 4.0rem;
}
&.clear {
color: var(--w-700);
&.secondary {
color: var(--s-700)
}
&.success {
color: var(--g-700)
}
&.alert {
color: var(--r-700)
}
&.warning {
color: var(--y-600);
color: var(--y-700)
}
&:hover {
@ -146,6 +159,8 @@ $default-button-height: 4.0rem;
&.small {
height: var(--space-large);
padding-bottom: var(--space-smaller);
padding-top: var(--space-smaller);
}
&.large {

10
app/javascript/dashboard/assets/scss/widgets/_modal.scss
View file

@ -14,15 +14,9 @@
}
.modal--close {
border-radius: 50%;
color: $color-heading;
cursor: pointer;
font-size: $font-size-big;
line-height: $space-normal;
padding: $space-normal;
position: absolute;
right: $space-micro;
top: $space-micro;
right: $space-small;
top: $space-small;
&:hover {
background: $color-background;

10
app/javascript/dashboard/components/Modal.vue
View file

@ -7,9 +7,13 @@
@click="onBackDropClick"
>
<div :class="modalContainerClassName" @click.stop>
<button class="modal--close" @click="close">
<fluent-icon icon="dismiss" />
</button>
<woot-button
color-scheme="secondary"
icon="dismiss"
variant="clear"
class="modal--close"
@click="close"
/>
<slot />
</div>
</div>

20
app/javascript/shared/components/ui/MultiselectDropdown.vue
View file

@ -41,9 +41,18 @@
:class="{ 'dropdown-pane--open': showSearchDropdown }"
class="dropdown-pane"
>
<div class="dropdown__header">
<h4 class="text-block-title text-truncate">
{{ multiselectorTitle }}
</h4>
<woot-button
icon="dismiss"
size="tiny"
color-scheme="secondary"
variant="clear"
@click="onCloseDropdown"
/>
</div>
<multiselect-dropdown-items
v-if="showSearchDropdown"
:options="options"
@ -172,4 +181,15 @@ export default {
width: 100%;
}
}
.dropdown__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-smaller);
.text-block-title {
margin: 0;
}
}
</style>

13
app/javascript/shared/components/ui/MultiselectDropdownItems.vue
View file

@ -20,6 +20,7 @@
<woot-button
class="multiselect-dropdown--item"
variant="clear"
color-scheme="secondary"
:class="{
active: option.id === (selectedItem && selectedItem.id),
}"
@ -129,7 +130,7 @@ export default {
width: 100%;
display: flex;
flex-direction: column;
max-height: 16rem;
max-height: 20rem;
}
.search-wrap {
@ -162,7 +163,7 @@ export default {
.multiselect-dropdown--list {
width: 100%;
max-height: 12rem;
max-height: 16rem;
}
.multiselect-dropdown--item {
@ -170,13 +171,13 @@ export default {
width: 100%;
&.active {
background-color: var(--w-50);
color: var(--w-900);
font-weight: var(--font-weight-bold);
background-color: var(--w-25);
color: var(--w-800);
font-weight: var(--font-weight-medium);
}
&:focus {
background-color: var(--color-background);
background-color: var(--color-background-light);
}
}

8
app/javascript/shared/components/ui/dropdown/DropdownItem.vue
View file

@ -29,19 +29,15 @@ export default {
<style lang="scss" scoped>
.dropdown-menu__item {
list-style: none;
margin-bottom: var(--space-micro);
::v-deep {
a,
.button {
display: inline-flex;
width: 100%;
text-align: left;
color: var(--s-700);
white-space: nowrap;
display: inline-flex;
padding: var(--space-small);
padding-top: var(--space-small);
padding-bottom: var(--space-small);
border-radius: var(--border-radius-normal);
&:hover {
background: var(--color-background);