Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Add notification quick-filter bar in the frontend app (#9399)

Browse source 
* create FilterBar componer and its container, unstyled

* introduce basic styling for FilterBar

* add selection css

* allow FilterBar to display active CSS with js

* connect the FilterBar to the Redux state

* change getNotifications to use filter

* remove temporary comments

* add an option to turn the FilterBar off in settings

* fix showFilterBar data type to boolean

* fix eslint errors

* add English and Polish translations

* allowed filter bar overflow to accomodate for longer languages

* fix mispelled translation key

* add unified CSS look

* replace text in FilterBar with icons

* add tooltips

* replace text @ with an icon

* introduce simple and advanced filtering view

* add ability to toggle the advanced view

* add Polish translations

* change Advanced View description to be more clear

* make each filter flush notifications and load new ones, fixing pagination

* simplify getNotifications once frontend filtering is not needed for FilterBar

* add a semicolon

* Revert "simplify getNotifications once frontend filtering is not needed for FilterBar"

This reverts commit 9f4be7857135b0327814bd22a3e8a4e7b546f7cc.

* reset filter to 'all' when turning off FilterBar
This commit is contained in:
Paweł Ngei 2018-12-16 05:56:41 +01:00 • committed by Eugen Rochko
parent 5f0d3e8bad
commit 13dce12665
11 changed files with 244 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

46
app/javascript/styles/mastodon/components.scss
View file

@ -1484,6 +1484,52 @@ a.account__display-name {
}
}
.notification__filter-bar {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background: $ui-base-color;
& > button {
position: relative;
flex-grow: 1;
color: $primary-text-color;
padding: 10px 5px 12px;
text-decoration: none;
font-weight: 400;
font-size: 15px;
line-height: 18px;
background: darken($ui-base-color, 4%);
border: 0;
border-bottom: 1px solid lighten($ui-base-color, 8%);
cursor: default;
&.active {
color: $secondary-text-color;
&::before,
&::after {
display: block;
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
transform: translateX(-50%);
border-style: solid;
border-width: 0 10px 10px;
border-color: transparent transparent lighten($ui-base-color, 8%);
}
&::after {
bottom: -1px;
border-color: transparent transparent $ui-base-color;
}
}
}
}
.notification__message {
margin: 0 10px 0 68px;
padding: 8px 0 0;