Move new search experience to a Beta (#7718)
This commit is contained in:
Michael Telatynski
GitHub
parent
5201c9b285
commit
ed185240a5
16 changed files with 329 additions and 116 deletions
|
|
@ -35,6 +35,7 @@ limitations under the License.
|
|||
mask-repeat: no-repeat;
|
||||
background-color: $secondary-content;
|
||||
margin-left: 7px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.mx_RoomSearch_input {
|
||||
|
|
@ -44,14 +45,18 @@ limitations under the License.
|
|||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-16px;
|
||||
|
||||
&:not(.mx_RoomSearch_inputExpanded)::placeholder {
|
||||
color: $tertiary-content !important; // !important to override default app-wide styles
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSearch_input,
|
||||
.mx_RoomSearch_spotlightTriggerText {
|
||||
font-size: $font-12px;
|
||||
line-height: $font-16px;
|
||||
}
|
||||
|
||||
&.mx_RoomSearch_hasQuery {
|
||||
border-color: $secondary-content;
|
||||
}
|
||||
|
|
@ -108,4 +113,36 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_RoomSearch_spotlightTrigger {
|
||||
cursor: pointer;
|
||||
min-width: 0;
|
||||
|
||||
.mx_RoomSearch_spotlightTriggerText {
|
||||
color: $tertiary-content;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
// the following rules are to match that of a real input field
|
||||
overflow: hidden;
|
||||
margin: 9px;
|
||||
font-weight: $font-semi-bold;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $tertiary-content;
|
||||
|
||||
.mx_RoomSearch_spotlightTriggerText {
|
||||
color: $background;
|
||||
}
|
||||
|
||||
.mx_RoomSearch_shortcutPrompt {
|
||||
background-color: $background;
|
||||
color: $secondary-content;
|
||||
}
|
||||
|
||||
.mx_RoomSearch_icon {
|
||||
background-color: $background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,6 +56,14 @@ limitations under the License.
|
|||
line-height: $font-15px;
|
||||
color: $secondary-content;
|
||||
margin-top: 20px;
|
||||
|
||||
> h4 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> p {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -64,6 +72,7 @@ limitations under the License.
|
|||
width: 300px;
|
||||
object-fit: contain;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -90,6 +99,7 @@ limitations under the License.
|
|||
border-radius: 8px;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
font-weight: $font-semi-bold;
|
||||
line-height: 15px;
|
||||
color: #FFFFFF;
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -223,18 +223,13 @@ limitations under the License.
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_recentSearches {
|
||||
overflow-y: hidden;
|
||||
height: calc(100% - 190px);
|
||||
|
||||
> h4 > .mx_AccessibleButton_kind_link {
|
||||
padding: 0;
|
||||
float: right;
|
||||
font-weight: normal;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $secondary-content;
|
||||
}
|
||||
.mx_SpotlightDialog_recentSearches > h4 > .mx_AccessibleButton_kind_link {
|
||||
padding: 0;
|
||||
float: right;
|
||||
font-weight: normal;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $secondary-content;
|
||||
}
|
||||
|
||||
.mx_SpotlightDialog_enterPrompt {
|
||||
|
|
@ -253,28 +248,21 @@ limitations under the License.
|
|||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $secondary-content;
|
||||
padding: 16px 16px 20px;
|
||||
padding: 12px 16px 16px;
|
||||
display: flex;
|
||||
border-top: 1px solid $quinary-content;
|
||||
|
||||
.mx_BetaCard_betaPill {
|
||||
margin-right: 12px;
|
||||
height: min-content;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
> span {
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
align-self: center;
|
||||
|
||||
&::before {
|
||||
background-color: $secondary-content;
|
||||
content: "";
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
.mx_AccessibleButton_kind_link_inline {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_UserSettingsDialog_labsIcon::before {
|
||||
mask-image: url('$(res)/img/element-icons/settings/lab-flags.svg');
|
||||
mask-image: url('$(res)/img/element-icons/settings/flask.svg');
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog_mjolnirIcon::before {
|
||||
|
|
|
|||
BIN
res/img/betas/new_search_experience.gif
Normal file
BIN
res/img/betas/new_search_experience.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 887 KiB |
3
res/img/element-icons/settings/flask.svg
Normal file
3
res/img/element-icons/settings/flask.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 3C7.32843 3 8 2.32843 8 1.5C8 0.671573 7.32843 0 6.5 0C5.67157 0 5 0.671573 5 1.5C5 2.32843 5.67157 3 6.5 3ZM15.2041 14.7404L11.598 8.73148L11.624 6.96296H12.1176C12.2554 6.96296 12.3876 6.91224 12.485 6.82194C12.5825 6.73164 12.6372 6.60918 12.6372 6.48148C12.6372 6.35378 12.5825 6.23132 12.485 6.14102C12.3876 6.05073 12.2554 6 12.1176 6H5.88237C5.74456 6 5.6124 6.05073 5.51495 6.14102C5.41751 6.23132 5.36277 6.35378 5.36277 6.48148C5.36277 6.60918 5.41751 6.73164 5.51495 6.82194C5.6124 6.91224 5.74456 6.96296 5.88237 6.96296H6.376L6.40198 8.73148L2.79592 14.7404C2.59646 15.0747 2.49454 15.4515 2.50023 15.8335C2.50591 16.2155 2.619 16.5895 2.82833 16.9186C3.03766 17.2477 3.336 17.5206 3.69389 17.7102C4.05179 17.8999 4.45686 17.9997 4.86914 18H13.1309C13.5431 17.9997 13.9482 17.8999 14.3061 17.7102C14.664 17.5206 14.9623 17.2477 15.1717 16.9186C15.381 16.5895 15.4941 16.2155 15.4998 15.8335C15.5055 15.4515 15.4035 15.0747 15.2041 14.7404ZM7.37364 9.08778C7.41831 9.01432 7.44159 8.93136 7.44118 8.84704L7.4152 6.96296H10.5848L10.5588 8.84704C10.5584 8.93136 10.5817 9.01432 10.6264 9.08778L12.4814 12.1837C11.4354 12.1572 10.3977 12.0034 9.3949 11.7263C8.31816 11.4355 7.20603 11.2721 6.08502 11.24L7.37364 9.08778ZM13 3.5C13 4.32843 12.3284 5 11.5 5C10.6716 5 10 4.32843 10 3.5C10 2.67157 10.6716 2 11.5 2C12.3284 2 13 2.67157 13 3.5Z" fill="#737D8C"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -1,4 +0,0 @@
|
|||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.9722 17C2.43527 17 2 16.5647 2 16.0278V9.29493C2 9.12977 2.21388 9 2.4861 9H3.45831C3.73052 9 3.94441 9.12977 3.94441 9.29493V16.0278C3.94441 16.5647 3.50914 17 2.9722 17Z" fill="black"/>
|
||||
<path d="M4.67853 1C2.71201 1 2.00037 2.32352 2.00037 3.14492V11.7828H3.46227C6.54174 10.3832 9.54358 13.0302 12.7136 12.9997C15.8837 12.9693 16.0001 11.2655 16.0001 10.4136V3.57086C16.0001 0.786973 14.0724 3.46432 10.7987 2.38431C7.95667 1.44674 7.44433 1 4.67853 1Z" fill="black"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 587 B |
Loading…
Add table
Add a link
Reference in a new issue