imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #2448 from matrix-org/bwindels/searchmakeover

Browse source 
Redesign: search makeover
This commit is contained in:
Bruno Windels 2019-01-17 12:12:26 +00:00 • committed by GitHub
commit 89b576936b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 107 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

44
res/css/structures/_RoomView.scss
View file

@ -95,12 +95,10 @@ limitations under the License.
flex-direction: column;
}
.mx_RoomView_body .mx_RoomView_messagePanel {
order: 2;
}
.mx_RoomView_body .mx_RoomView_messagePanelSpinner {
order: 2;
.mx_RoomView_body {
.mx_RoomView_messagePanel, .mx_RoomView_messagePanelSpinner, .mx_RoomView_messagePanelSearchSpinner{
order: 2;
}
}
.mx_RoomView_body .mx_RoomView_statusArea {
@ -116,6 +114,29 @@ limitations under the License.
overflow-y: auto;
}
.mx_RoomView_messagePanelSearchSpinner {
flex: 1;
background-image: url('../../img/typing-indicator-2x.gif');
background-position: center 367px;
background-size: 25px;
background-repeat: no-repeat;
position: relative;
}
.mx_RoomView_messagePanelSearchSpinner:before {
background-color: $greyed-fg-color;
mask: url('../../../img/feather-icons/search-input.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: 50px;
content: '';
position: absolute;
top: 286px;
left: 0;
right: 0;
height: 50px;
}
.mx_RoomView_messageListWrapper {
min-height: 100%;
@ -126,8 +147,15 @@ limitations under the License.
justify-content: flex-end;
}
.mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper {
justify-content: flex-start;
.mx_RoomView_searchResultsPanel {
.mx_RoomView_messageListWrapper {
justify-content: flex-start;
}
a {
text-decoration: none;
color: inherit;
}
}
.mx_RoomView_empty {

2
res/css/views/rooms/_RoomHeader.scss
View file

@ -98,6 +98,7 @@ limitations under the License.
font-size: 18px;
margin: 0 7px;
border-bottom: 1px solid transparent;
display: flex;
}
.mx_RoomHeader_nametext {
@ -111,7 +112,6 @@ limitations under the License.
}
.mx_RoomHeader_searchStatus {
display: inline-block;
font-weight: normal;
opacity: 0.6;
}

99
res/css/views/rooms/_SearchBar.scss
View file

@ -15,69 +15,52 @@ limitations under the License.
*/
.mx_SearchBar {
padding-top: 5px;
padding-bottom: 5px;
height: 56px;
display: flex;
align-items: center;
}
border-bottom: 1px solid $primary-hairline-color;
.mx_SearchBar_input {
display: inline block;
border-radius: 3px 0px 0px 3px;
border: 1px solid $input-border-color;
font-size: 15px;
padding: 9px;
padding-left: 11px;
width: auto;
flex: 1 1 0;
}
.mx_SearchBar_input {
// border: 1px solid $input-border-color;
// font-size: 15px;
flex: 1 1 0;
margin-left: 22px;
}
.mx_SearchBar_searchButton {
cursor: pointer;
margin-right: 10px;
width: 37px;
height: 37px;
border-radius: 0px 3px 3px 0px;
background-color: $accent-color;
}
.mx_SearchBar_searchButton {
cursor: pointer;
width: 37px;
height: 37px;
background-color: $accent-color;
mask: url('../../../img/feather-icons/search-input.svg');
mask-repeat: no-repeat;
mask-position: center;
}
@keyframes pulsate {
0% { opacity: 1.0; }
50% { opacity: 0.1; }
100% { opacity: 1.0; }
}
.mx_SearchBar_button {
border: 0;
margin: 0 0 0 22px;
padding: 5px;
font-size: 15px;
cursor: pointer;
color: $primary-fg-color;
border-bottom: 2px solid $accent-color;
font-weight: 600;
}
.mx_SearchBar_searching img {
animation: pulsate 0.5s ease-out;
animation-iteration-count: infinite;
}
.mx_SearchBar_unselected {
color: $input-darker-fg-color;
border-color: transparent;
}
.mx_SearchBar_button {
display: inline;
border: 0px;
border-radius: 36px;
font-weight: 400;
font-size: 15px;
color: $accent-fg-color;
background-color: $accent-color;
width: auto;
margin: auto;
margin-left: 7px;
padding-top: 6px;
padding-bottom: 4px;
padding-left: 24px;
padding-right: 24px;
cursor: pointer;
}
.mx_SearchBar_unselected {
background-color: $primary-bg-color;
color: $accent-color;
border: $accent-color 1px solid;
}
.mx_SearchBar_cancel {
padding-left: 14px;
padding-right: 14px;
cursor: pointer;
.mx_SearchBar_cancel {
background-color: $warning-color;
mask: url('../../../img/cancel.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: 14px;
padding: 9px;
margin: 0 12px 0 3px;
cursor: pointer;
}
}