diff --git a/res/css/_components.scss b/res/css/_components.scss index 57a34023c0..62c6186152 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -126,6 +126,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..41149fc0b2 --- /dev/null +++ b/res/css/views/rooms/_RoomBreadcrumbs.scss @@ -0,0 +1,47 @@ +/* +Copyright 2015, 2016 OpenMarket 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; + + > div { + display: flex; + flex-direction: row; + position: absolute; + right: 0; + top: 0; + height: 32px; + + > * { + margin-right: 4px; + } + } + + &::after { + content: ""; + position: absolute; + width: 15px; + top: 0; + left: 0; + height: 100%; + background: linear-gradient(to left, rgba(242,245,248,0), rgba(242,245,248,1)); + } +} + diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js index bd49f8acd4..49956265f6 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'); @@ -221,6 +222,7 @@ const LeftPanel = React.createClass({ { tagPanelContainer }