diff --git a/res/css/_components.scss b/res/css/_components.scss index 80add0b1ad..dbf6e7b8b9 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -127,6 +127,7 @@ @import "./views/rooms/_PinnedEventsPanel.scss"; @import "./views/rooms/_PresenceLabel.scss"; @import "./views/rooms/_ReplyPreview.scss"; +@import "./views/rooms/_RoomBreadcrumbs.scss"; @import "./views/rooms/_RoomDropTarget.scss"; @import "./views/rooms/_RoomHeader.scss"; @import "./views/rooms/_RoomList.scss"; diff --git a/res/css/views/rooms/_RoomBreadcrumbs.scss b/res/css/views/rooms/_RoomBreadcrumbs.scss new file mode 100644 index 0000000000..ba4aec3b6e --- /dev/null +++ b/res/css/views/rooms/_RoomBreadcrumbs.scss @@ -0,0 +1,54 @@ +/* +Copyright 2019 New Vector Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_RoomBreadcrumbs { + overflow-x: auto; + position: relative; + height: 32px; + margin: 8px; + margin-bottom: 0; + + overflow-x: hidden; + display: flex; + flex-direction: row; + + > * { + margin-left: 4px; + } + + &::after { + content: ""; + position: absolute; + width: 15px; + top: 0; + right: 0; + height: 100%; + background: linear-gradient(to right, rgba(242,245,248,0), rgba(242,245,248,1)); + } + + .mx_RoomBreadcrumbs_animate { + margin-left: 0; + transition: transform 0.3s, width 0.3s; + width: 32px; + transform: scale(1); + } + + .mx_RoomBreadcrumbs_preAnimate { + width: 0; + transform: scale(0); + } +} + diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js index bd49f8acd4..000195d349 100644 --- a/src/components/structures/LeftPanel.js +++ b/src/components/structures/LeftPanel.js @@ -182,6 +182,7 @@ const LeftPanel = React.createClass({ render: function() { const RoomList = sdk.getComponent('rooms.RoomList'); + const RoomBreadcrumbs = sdk.getComponent('rooms.RoomBreadcrumbs'); const TagPanel = sdk.getComponent('structures.TagPanel'); const CustomRoomTagPanel = sdk.getComponent('structures.CustomRoomTagPanel'); const TopLeftMenuButton = sdk.getComponent('structures.TopLeftMenuButton'); @@ -215,12 +216,17 @@ const LeftPanel = React.createClass({ onCleared={ this.onSearchCleared } collapsed={this.props.collapsed} />); + let breadcrumbs; + if (SettingsStore.isFeatureEnabled("feature_room_breadcrumbs")) { + breadcrumbs = (); + } return (
{ tagPanelContainer }