PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Apply new design to highlighted tags and add toggle mechanic

Browse source
This commit is contained in:
Michael Telatynski 2019-12-19 16:54:30 +00:00
parent a13ee490e8
commit 1c31fd3413
2 changed files with 16 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
res/css/structures/_TagPanel.scss
View file

@ -68,7 +68,7 @@ limitations under the License.
} }
.mx_TagPanel .mx_TagPanel_tagTileContainer > div { .mx_TagPanel .mx_TagPanel_tagTileContainer > div {
height: 40px; height: 40px;
padding: 5px 0 4px 0; padding: 10px 0 9px 0;
} }
.mx_TagPanel .mx_TagTile { .mx_TagPanel .mx_TagTile {
@ -82,21 +82,15 @@ limitations under the License.
// opacity: 1; // opacity: 1;
} }
.mx_TagPanel .mx_TagTile.mx_TagTile_selected .mx_TagTile_avatar .mx_BaseAvatar { .mx_TagPanel .mx_TagTile.mx_TagTile_selected::before {
content: '';
height: 56px;
background-color: $accent-color; background-color: $accent-color;
border-radius: 40px; width: 5px;
position: absolute;
/* In case this is a "initial" avatar */ left: -15px;
display: block; border-radius: 0 2px 2px 0;
height: 40px; top: -8px; // (56 - 40)/2
width: 40px;
}
.mx_TagPanel .mx_TagTile_selected .mx_BaseAvatar_image {
border: 3px solid $accent-color;
height: 40px;
width: 40px;
box-sizing: border-box;
} }
.mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus { .mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {

9
src/stores/TagOrderStore.js
View file

@ -141,8 +141,13 @@ class TagOrderStore extends Store {
newTags = [...this._state.selectedTags, payload.tag]; newTags = [...this._state.selectedTags, payload.tag];
} }
} else { } else {
// Select individual tag if (this._state.selectedTags.length === 1 && this._state.selectedTags.includes(payload.tag)) {
newTags = [payload.tag]; // Existing (only) selected tag is being normally clicked again, clear tags
newTags = [];
} else {
// Select individual tag
newTags = [payload.tag];
}
} }
// Only set the anchor tag if the tag was previously unselected, otherwise // Only set the anchor tag if the tag was previously unselected, otherwise
// the next range starts with an unselected tag. // the next range starts with an unselected tag.