Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

typeahead: Make them look like dropdown widget. 

This attempts to change background color and text color of typeaheads
to be same as dropdown widgets we have in the app.
This commit is contained in:
Aman Agrawal 2024-05-13 10:22:52 +00:00 committed by Tim Abbott
parent 1fac997338
commit 52ac602acb
7 changed files with 54 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/bootstrap_typeahead.ts
View File

@ -341,7 +341,7 @@ export class Typeahead<ItemType extends string | object> {
// and wraps it if it overflows the visible container.
maxWidth: "none",
delay: [0, 0],
theme: "popover-menu",
theme: "dropdown-widget",
placement: this.dropup ? "top-start" : "bottom-start",
popperOptions: {
strategy: "fixed",
@ -373,7 +373,7 @@ export class Typeahead<ItemType extends string | object> {
// We expect the typeahead creator to handle when to hide / show the typeahead.
trigger: "manual",
arrow: false,
offset: [0, 0],
offset: [0, 2],
// We have event handlers to hide the typeahead, so we
// don't want tippy to hide it for us.
hideOnClick: false,

10
web/styles/app_variables.css
View File

@ -627,6 +627,11 @@
--color-background-emoji-picker-emoji-reacted-focus: hsl(195deg 55% 88%);
/* Same color as background color of header / footer */
--color-border-emoji-picker-tippy-arrow: hsl(0deg 0% 93%);
/* Dropdown constants */
--color-dropdown-item: hsl(0deg 0% 20%);
--color-active-dropdown-item: hsl(0deg 0% 0%);
--background-color-active-dropdown-item: hsl(220deg 12% 4.9% / 5%);
}
%dark-theme {
@ -975,6 +980,11 @@
--color-border-add-subscription-button-focus: hsl(0deg 0% 67%);
/* Same color as background color of header / footer */
--color-border-emoji-picker-tippy-arrow: hsl(211.58deg 33.33% 11.18%);
/* Dropdown constants */
--color-dropdown-item: hsl(0deg 0% 75%);
--color-active-dropdown-item: hsl(0deg 0% 90%);
--background-color-active-dropdown-item: hsl(220deg 12% 100% / 7%);
}
@media screen {

6
web/styles/compose.css
View File

@ -1288,12 +1288,9 @@ textarea.new_message_textarea {
}
.typeahead.dropdown-menu {
background: hsl(0deg 0% 100%);
.typeahead-menu {
list-style: none;
margin: 0;
background-color: var(--color-background-popover);
margin: 4px 0;
}
.typeahead-header {
@ -1307,6 +1304,7 @@ textarea.new_message_textarea {
}
#typeahead-header-text {
color: var(--color-dropdown-item);
font-size: 12px;
}
}

18
web/styles/dark_theme.css
View File

@ -152,20 +152,6 @@
0 2px 4px hsl(0deg 0% 0% / 20%);
}
.dropdown-list-container .dropdown-list .list-item {
&:focus {
background-color: hsl(220deg 12% 95.1% / 5%);
}
& > a {
color: hsl(0deg 0% 75%);
&:hover {
background-color: hsl(220deg 12% 95.1% / 5%);
}
}
}
#navbar-middle .column-middle-inner,
.header,
#message_view_header {
@ -548,7 +534,6 @@
}
& div.overlay .flex.overlay-content > div,
.dropdown-menu.typeahead,
#settings_page,
.informational-overlays .overlay-content {
box-shadow: 0 0 30px hsl(212deg 32% 7%);
@ -904,8 +889,7 @@
background-color: hsl(0deg 0% 0% / 20%);
}
#feedback_container,
.typeahead.dropdown-menu {
#feedback_container {
background-color: hsl(212deg 25% 15%);
border-color: hsl(0deg 0% 0% / 50%);
color: inherit;

8
web/styles/inbox.css
View File

@ -568,8 +568,12 @@
width: 220px;
}
.recent-view-filter-dropdown-list-container .dropdown-list-item-common-styles,
.inbox-filter-dropdown-list-container .dropdown-list-item-common-styles {
.recent-view-filter-dropdown-list-container
.dropdown-list
.dropdown-list-item-common-styles,
.inbox-filter-dropdown-list-container
.dropdown-list
.dropdown-list-item-common-styles {
padding: 5px 10px;
display: flex;
flex-direction: column;

89
web/styles/zulip.css
View File

@ -795,7 +795,7 @@ strong {
+ https://github.com/zulip/zulip/commit/7a3a3be7e547d3e8f0ed00820835104867f2433d
basic idea of this fix is to remove decorations from :hover and apply them only
on :focus. */
.typeahead-menu {
.typeahead.dropdown-menu .typeahead-menu {
& li {
word-break: break-word;
@ -805,7 +805,7 @@ strong {
clear: both;
font-weight: normal;
line-height: 20px;
color: hsl(0deg 0% 20%);
color: var(--color-dropdown-item);
white-space: nowrap;
/* hidden text just to maintain line height for a blank option */
@ -816,19 +816,10 @@ strong {
}
}
&:hover {
text-decoration: none;
}
&:hover,
&:focus {
color: hsl(0deg 0% 100%);
text-decoration: none;
background-color: hsl(200deg 100% 38%);
background-image: linear-gradient(
to bottom,
hsl(200deg 100% 40%),
hsl(200deg 100% 35%)
);
outline: 0;
}
/* styles defined for user_circle here only deal with positioning of user_presence_circle
@ -849,24 +840,13 @@ strong {
}
.active > a {
color: hsl(0deg 0% 100%);
text-decoration: none;
background-color: hsl(200deg 100% 38%);
background-image: linear-gradient(
to bottom,
hsl(200deg 100% 40%),
hsl(200deg 100% 35%)
);
outline: 0;
.user_circle_empty {
border-color: hsl(0deg 0% 25%);
&,
&:hover,
&:focus {
color: var(--color-active-dropdown-item);
background-color: var(--background-color-active-dropdown-item);
}
}
.active > a:hover {
text-decoration: none;
}
}
/* Copied from bootstrap 2.1.1 CSS for dropdown-menu li > a:focus */
@ -1362,20 +1342,11 @@ div.focused-message-list {
}
.typeahead.dropdown-menu {
/* Use default color until some other typeahead overrides it. */
color: var(--color-text-default);
a {
color: inherit;
strong.typeahead-strong-section {
white-space: pre;
}
a strong.typeahead-strong-section {
white-space: pre;
}
.active {
color: hsl(0deg 0% 100%);
.unsubscribed_icon {
display: block;
float: right;
@ -2273,23 +2244,31 @@ body:not(.hide-left-sidebar) {
.dropdown-list {
list-style: none;
margin: 0;
.list-item:focus {
background-color: hsl(220deg 12% 4.9% / 5%);
outline: none;
}
}
}
.no-dropdown-items {
color: hsl(0deg 0% 60%);
display: none;
}
.no-dropdown-items {
color: hsl(0deg 0% 60%);
display: none;
padding: 3px 10px 3px 8px;
font-weight: 400;
line-height: 20px;
white-space: normal;
}
}
.dropdown-list-container .dropdown-list-item-common-styles {
.dropdown-list-container .list-item {
color: var(--color-dropdown-item);
&:focus {
background-color: var(--background-color-active-dropdown-item);
outline: none;
}
}
.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles {
display: block;
color: hsl(0deg 0% 20%);
color: var(--color-dropdown-item);
padding: 3px 10px 3px 8px;
font-weight: 400;
line-height: 20px;
@ -2302,13 +2281,11 @@ body:not(.hide-left-sidebar) {
padding-right: 2px;
}
&:focus,
&:hover {
color: var(--color-dropdown-item);
text-decoration: none;
background-color: hsl(220deg 12% 4.9% / 5%);
}
&:focus {
text-decoration: none;
background-color: var(--background-color-active-dropdown-item);
outline: none;
}
}

60
web/third/bootstrap-typeahead/typeahead.css
View File

@ -1,68 +1,8 @@
/* CSS for Bootstrap typeahead */
.dropdown-menu {
display: none;
padding: 5px 0;
min-width: 160px;
list-style: none;
background-color: #ffffff;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.dropdown-menu .divider {
height: 1px;
margin: 9px 1px;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #ffffff;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 20px;
color: #333333;
white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
text-decoration: none;
color: #ffffff;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
color: #ffffff;
text-decoration: none;
outline: 0;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
color: #999999;
}
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
cursor: default;
}
.open > .dropdown-menu {
display: block;