feat: Dark Mode (#7471)
This commit is contained in:
Sivin Varghese
@@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<div
|
||||
v-on-clickaway="onCloseDropdown"
|
||||
class="selector-wrap"
|
||||
class="relative w-full mb-2"
|
||||
@keyup.esc="onCloseDropdown"
|
||||
>
|
||||
<woot-button
|
||||
variant="hollow"
|
||||
color-scheme="secondary"
|
||||
class="selector-button"
|
||||
class="w-full border border-solid border-slate-200 dark:border-slate-700 px-2.5 hover:border-slate-75 dark:hover:border-slate-600"
|
||||
@click="toggleDropdown"
|
||||
>
|
||||
<div class="selector-user-wrap">
|
||||
<div class="flex">
|
||||
<Thumbnail
|
||||
v-if="hasValue && hasThumbnail"
|
||||
:src="selectedItem.thumbnail"
|
||||
@@ -18,16 +18,16 @@
|
||||
:status="selectedItem.availability_status"
|
||||
:username="selectedItem.name"
|
||||
/>
|
||||
<div class="selector-name-wrap">
|
||||
<div class="flex justify-between w-full min-w-0 items-center">
|
||||
<h4
|
||||
v-if="!hasValue"
|
||||
class="not-selected text-ellipsis text-block-title"
|
||||
class="mt-0 mb-0 mr-2 ml-0 text-ellipsis text-sm text-slate-800 dark:text-slate-100"
|
||||
>
|
||||
{{ multiselectorPlaceholder }}
|
||||
</h4>
|
||||
<h4
|
||||
v-else
|
||||
class="selector-name text-truncate text-block-title"
|
||||
class="items-center leading-tight my-0 mx-2 overflow-hidden whitespace-nowrap text-ellipsis text-sm text-slate-800 dark:text-slate-100"
|
||||
:title="selectedItem.name"
|
||||
>
|
||||
{{ selectedItem.name }}
|
||||
@@ -41,8 +41,10 @@
|
||||
:class="{ 'dropdown-pane--open': showSearchDropdown }"
|
||||
class="dropdown-pane"
|
||||
>
|
||||
<div class="dropdown__header">
|
||||
<h4 class="text-block-title text-truncate">
|
||||
<div class="flex justify-between items-center mb-1">
|
||||
<h4
|
||||
class="text-sm text-slate-800 dark:text-slate-100 m-0 overflow-hidden whitespace-nowrap text-ellipsis"
|
||||
>
|
||||
{{ multiselectorTitle }}
|
||||
</h4>
|
||||
<woot-button
|
||||
@@ -135,61 +137,8 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.selector-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: var(--space-small);
|
||||
|
||||
.selector-button {
|
||||
width: 100%;
|
||||
border: 1px solid var(--s-200);
|
||||
padding-left: var(--space-one);
|
||||
padding-right: var(--space-one);
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
}
|
||||
|
||||
.selector-user-wrap {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.selector-name-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.not-selected {
|
||||
margin: 0 var(--space-small) 0 0;
|
||||
}
|
||||
|
||||
.selector-name {
|
||||
align-items: center;
|
||||
line-height: 1.2;
|
||||
margin: 0 var(--space-small);
|
||||
}
|
||||
|
||||
.dropdown-pane {
|
||||
box-sizing: border-box;
|
||||
top: 2.625rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-smaller);
|
||||
|
||||
.text-block-title {
|
||||
margin: 0;
|
||||
}
|
||||
.dropdown-pane {
|
||||
@apply box-border top-[2.625rem] w-full;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="dropdown-wrap">
|
||||
<div class="search-wrap">
|
||||
<div class="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
|
||||
<input
|
||||
ref="searchbar"
|
||||
v-model="search"
|
||||
@@ -10,8 +10,8 @@
|
||||
:placeholder="inputPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
<div class="list-scroll-container">
|
||||
<div class="multiselect-dropdown--list">
|
||||
<div class="flex justify-start items-start flex-auto overflow-auto">
|
||||
<div class="w-full max-h-[10rem]">
|
||||
<woot-dropdown-menu>
|
||||
<woot-dropdown-item
|
||||
v-for="option in filteredOptions"
|
||||
@@ -26,7 +26,7 @@
|
||||
}"
|
||||
@click="() => onclick(option)"
|
||||
>
|
||||
<div class="user-wrap">
|
||||
<div class="flex items-center">
|
||||
<Thumbnail
|
||||
v-if="hasThumbnail"
|
||||
:src="option.thumbnail"
|
||||
@@ -35,9 +35,9 @@
|
||||
:status="option.availability_status"
|
||||
has-border
|
||||
/>
|
||||
<div class="name-wrap">
|
||||
<div class="flex items-center justify-between w-full min-w-0">
|
||||
<span
|
||||
class="name text-truncate text-block-title"
|
||||
class="leading-4 my-0 mx-2 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
|
||||
:title="option.name"
|
||||
>
|
||||
{{ option.name }}
|
||||
@@ -48,7 +48,10 @@
|
||||
</woot-button>
|
||||
</woot-dropdown-item>
|
||||
</woot-dropdown-menu>
|
||||
<h4 v-if="noResult" class="no-result text-truncate text-block-title">
|
||||
<h4
|
||||
v-if="noResult"
|
||||
class="w-full justify-center items-center flex text-slate-500 dark:text-slate-300 py-2 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
|
||||
>
|
||||
{{ noSearchResult }}
|
||||
</h4>
|
||||
</div>
|
||||
@@ -128,92 +131,26 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dropdown-wrap {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 12.5rem;
|
||||
}
|
||||
|
||||
.search-wrap {
|
||||
margin-bottom: var(--space-small);
|
||||
flex: 0 0 auto;
|
||||
max-height: var(--space-large);
|
||||
@apply w-full flex flex-col max-h-[12.5rem];
|
||||
}
|
||||
|
||||
.search-input {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
border: 1px solid transparent;
|
||||
height: var(--space-large);
|
||||
font-size: var(--font-size-small);
|
||||
padding: var(--space-small);
|
||||
background-color: var(--color-background);
|
||||
|
||||
&:focus {
|
||||
border: 1px solid var(--w-500);
|
||||
}
|
||||
}
|
||||
|
||||
.list-scroll-container {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
flex: 1 1 auto;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.multiselect-dropdown--list {
|
||||
width: 100%;
|
||||
max-height: 10rem;
|
||||
@apply m-0 w-full border border-solid border-transparent h-8 text-sm text-slate-700 dark:text-slate-100 rounded-md focus:border-woot-500 bg-slate-50 dark:bg-slate-900;
|
||||
}
|
||||
|
||||
.multiselect-dropdown--item {
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
@apply justify-between w-full;
|
||||
|
||||
&.active {
|
||||
background: var(--s-25);
|
||||
border-color: var(--s-50);
|
||||
font-weight: var(--font-weight-medium);
|
||||
@apply bg-slate-25 dark:bg-slate-700 border-slate-50 dark:border-slate-900 font-medium;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: var(--color-background-light);
|
||||
@apply bg-slate-25 dark:bg-slate-700;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--s-800);
|
||||
background-color: var(--color-background);
|
||||
@apply bg-slate-50 dark:bg-slate-800 text-slate-800 dark:text-slate-100;
|
||||
}
|
||||
}
|
||||
|
||||
.user-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.name-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.name {
|
||||
line-height: var(--space-normal);
|
||||
margin: 0 var(--space-small);
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-left: var(--space-smaller);
|
||||
}
|
||||
|
||||
.no-result {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: var(--space-small) var(--space-one);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
<template>
|
||||
<div class="dropdown-search-wrap">
|
||||
<div class="dropdown-title-container">
|
||||
<h4 class="text-block-title">
|
||||
<div class="flex flex-col w-full max-h-[12.5rem]">
|
||||
<div class="flex items-center justify-center mb-1">
|
||||
<h4
|
||||
class="text-sm text-slate-800 dark:text-slate-100 m-0 overflow-hidden whitespace-nowrap text-ellipsis flex-grow"
|
||||
>
|
||||
{{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.TITLE') }}
|
||||
</h4>
|
||||
<hotkey>L</hotkey>
|
||||
</div>
|
||||
<div class="search-wrap">
|
||||
<div class="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
|
||||
<input
|
||||
ref="searchbar"
|
||||
v-model="search"
|
||||
@@ -16,8 +18,10 @@
|
||||
:placeholder="$t('CONTACT_PANEL.LABELS.LABEL_SELECT.PLACEHOLDER')"
|
||||
/>
|
||||
</div>
|
||||
<div class="list-wrap">
|
||||
<div class="list">
|
||||
<div
|
||||
class="flex justify-start items-start flex-grow flex-shrink flex-auto overflow-auto"
|
||||
>
|
||||
<div class="w-full">
|
||||
<woot-dropdown-menu>
|
||||
<label-dropdown-item
|
||||
v-for="label in filteredActiveLabels"
|
||||
@@ -28,10 +32,16 @@
|
||||
@click="onAddRemove(label)"
|
||||
/>
|
||||
</woot-dropdown-menu>
|
||||
<div v-if="noResult" class="no-result">
|
||||
<div
|
||||
v-if="noResult"
|
||||
class="flex justify-center py-4 px-2.5 font-medium text-xs text-slate-700 dark:text-slate-200"
|
||||
>
|
||||
{{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.NO_RESULT') }}
|
||||
</div>
|
||||
<div v-if="allowCreation && shouldShowCreate" class="new-label">
|
||||
<div
|
||||
v-if="allowCreation && shouldShowCreate"
|
||||
class="flex pt-1 border-t border-solid border-slate-100 dark:border-slate-900"
|
||||
>
|
||||
<woot-button
|
||||
size="small"
|
||||
variant="clear"
|
||||
@@ -171,88 +181,19 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dropdown-title-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-smaller);
|
||||
|
||||
.text-block-title {
|
||||
flex-grow: 1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hotkey {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.hotkey {
|
||||
@apply flex-shrink-0;
|
||||
}
|
||||
|
||||
.dropdown-search-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-height: 12.5rem;
|
||||
.search-input {
|
||||
@apply m-0 w-full border border-solid border-transparent h-8 text-sm text-slate-700 dark:text-slate-100 rounded-md focus:border-woot-500 bg-slate-50 dark:bg-slate-900;
|
||||
}
|
||||
|
||||
.search-wrap {
|
||||
margin-bottom: var(--space-small);
|
||||
flex: 0 0 auto;
|
||||
max-height: var(--space-large);
|
||||
.button-new-label {
|
||||
@apply whitespace-nowrap text-ellipsis overflow-hidden items-center;
|
||||
|
||||
.search-input {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
border: 1px solid transparent;
|
||||
height: var(--space-large);
|
||||
font-size: var(--font-size-small);
|
||||
padding: var(--space-small);
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: 1px solid var(--color-border-dark);
|
||||
}
|
||||
}
|
||||
|
||||
.list-wrap {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
flex: 1 1 auto;
|
||||
overflow: auto;
|
||||
|
||||
.list {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.no-result {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: var(--s-700);
|
||||
padding: var(--space-normal) var(--space-one);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-size: var(--font-size-mini);
|
||||
}
|
||||
|
||||
.new-label {
|
||||
display: flex;
|
||||
padding-top: var(--space-smaller);
|
||||
border-top: 1px solid var(--s-100);
|
||||
|
||||
.button-new-label {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.search-term {
|
||||
color: var(--s-700);
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
@apply min-w-0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -47,54 +47,38 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.item-wrap {
|
||||
display: flex;
|
||||
@apply flex;
|
||||
|
||||
::v-deep .button__content {
|
||||
width: 100%;
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
.button-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
@apply flex justify-between w-full;
|
||||
|
||||
&.active {
|
||||
display: flex;
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--w-700);
|
||||
@apply flex font-semibold text-woot-700 dark:text-woot-600;
|
||||
}
|
||||
|
||||
.name-label-wrap {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
@apply flex min-w-0 w-full;
|
||||
|
||||
.label-color--display {
|
||||
margin-right: var(--space-small);
|
||||
@apply mr-2 rtl:mr-0 rtl:ml-2;
|
||||
}
|
||||
|
||||
.label-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
line-height: 1.1;
|
||||
padding-right: var(--space-small);
|
||||
@apply overflow-hidden text-ellipsis whitespace-nowrap leading-[1.1] pr-2;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: var(--font-size-small);
|
||||
@apply text-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label-color--display {
|
||||
border-radius: var(--border-radius-normal);
|
||||
height: var(--space-slab);
|
||||
margin-right: var(--space-smaller);
|
||||
margin-top: var(--space-micro);
|
||||
min-width: var(--space-slab);
|
||||
width: var(--space-slab);
|
||||
border: 1px solid var(--color-border-light);
|
||||
@apply rounded-md h-3 mr-1 rtl:mr-0 rtl:ml-1 mt-0.5 min-w-[0.75rem] w-3 border border-solid border-slate-50 dark:border-slate-600;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user