diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index a551e5f1af..3cebc0b75f 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -19,6 +19,11 @@ limitations under the License. table-layout: fixed; width: 100%; +} + +.mx_RoomSubList_resizer { + width: 100%; + height: 3px; background-color: $roomsublist-background; } @@ -36,6 +41,7 @@ limitations under the License. font-size: 12px; width: 203px; /* padding + width = LHS Panel width */ height: 19px; /* height + padding = 31px = mx_RoomSubList_label height */ + margin-left: 16px; padding-left: 16px; /* gutter */ padding-right: 16px; /* gutter */ padding-top: 6px; @@ -123,34 +129,28 @@ limitations under the License. } .mx_RoomSubList_chevron { + left: 0px; pointer-events: none; position: absolute; - right: 41px; top: 11px; + width: 9px; + height: 4px; + background-image: url('../../img/topleft-chevron.svg'); + background-size: cover; + // the transition doesn't work as the chevron gets remounted + transition: rotateZ 0.2s ease-in; } .mx_RoomSubList_chevronDown { - width: 0; - height: 0; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 6px solid $roomsublist-chevron-color; + transform: rotateZ(0deg); } .mx_RoomSubList_chevronUp { - width: 0; - height: 0; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 6px solid $roomsublist-chevron-color; + transform: rotateZ(180deg); } .mx_RoomSubList_chevronRight { - width: 0; - height: 0; - border-top: 5px solid transparent; - border-left: 6px solid $roomsublist-chevron-color; - border-bottom: 5px solid transparent; + transform: rotateZ(-90deg); } /* The overflow section */ diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss index ea8a1975b5..83e7d46524 100644 --- a/res/css/structures/_TagPanel.scss +++ b/res/css/structures/_TagPanel.scss @@ -15,8 +15,8 @@ limitations under the License. */ .mx_TagPanel { - flex: 0 0 60px; - background-color: $tertiary-accent-color; + flex: 0 0 70px; + background-color: $tagpanel-bg-color; cursor: pointer; display: flex; diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index 9286331f2d..9055d439e6 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -102,6 +102,7 @@ $voip-accept-color: #80f480; $rte-bg-color: #e9e9e9; $rte-code-bg-color: rgba(0, 0, 0, 0.04); $rte-room-pill-color: #aaa; +$rte-group-pill-color: #aaa; $topleftmenu-color: #212121; $roomheader-color: #45474a; diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index b07f12f995..61bbffb647 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -68,7 +68,7 @@ const RoomSubList = React.createClass({ getInitialState: function() { return { hidden: this.props.startAsHidden || false, - truncateAt: TRUNCATE_AT, + truncateAt: -1, // TRUNCATE_AT, sortedList: [], }; }, @@ -346,8 +346,8 @@ const RoomSubList = React.createClass({ return (