diff --git a/res/css/_components.scss b/res/css/_components.scss index 2e9477199d..24d1a73edc 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -175,7 +175,7 @@ @import "./views/rooms/_PinnedEventsPanel.scss"; @import "./views/rooms/_PresenceLabel.scss"; @import "./views/rooms/_ReplyPreview.scss"; -@import "./views/rooms/_RoomBreadcrumbs2.scss"; +@import "./views/rooms/_RoomBreadcrumbs.scss"; @import "./views/rooms/_RoomHeader.scss"; @import "./views/rooms/_RoomList.scss"; @import "./views/rooms/_RoomPreviewBar.scss"; diff --git a/res/css/views/rooms/_RoomBreadcrumbs2.scss b/res/css/views/rooms/_RoomBreadcrumbs.scss similarity index 85% rename from res/css/views/rooms/_RoomBreadcrumbs2.scss rename to res/css/views/rooms/_RoomBreadcrumbs.scss index b4a957cd8d..6512797401 100644 --- a/res/css/views/rooms/_RoomBreadcrumbs2.scss +++ b/res/css/views/rooms/_RoomBreadcrumbs.scss @@ -14,9 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367 - -.mx_RoomBreadcrumbs2 { +.mx_RoomBreadcrumbs { width: 100%; // Create a flexbox for the crumbs @@ -24,7 +22,7 @@ limitations under the License. flex-direction: row; align-items: flex-start; - .mx_RoomBreadcrumbs2_crumb { + .mx_RoomBreadcrumbs_crumb { margin-right: 8px; width: 32px; } @@ -33,10 +31,10 @@ limitations under the License. // could care about, but this is all we worried about for now. The animation works by // first triggering the enter state with the newest breadcrumb off screen (-40px) then // sliding it into view. - &.mx_RoomBreadcrumbs2-enter { + &.mx_RoomBreadcrumbs-enter { margin-left: -40px; // 32px for the avatar, 8px for the margin } - &.mx_RoomBreadcrumbs2-enter-active { + &.mx_RoomBreadcrumbs-enter-active { margin-left: 0; // Timing function is as-requested by design. @@ -44,7 +42,7 @@ limitations under the License. transition: margin-left 640ms cubic-bezier(0.66, 0.02, 0.36, 1); } - .mx_RoomBreadcrumbs2_placeholder { + .mx_RoomBreadcrumbs_placeholder { font-weight: 600; font-size: $font-14px; line-height: 32px; // specifically to match the height this is not scaled @@ -52,7 +50,7 @@ limitations under the License. } } -.mx_RoomBreadcrumbs2_Tooltip { +.mx_RoomBreadcrumbs_Tooltip { margin-left: -42px; margin-top: -42px; } diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx index c827d8fcee..8e2d205a69 100644 --- a/src/components/structures/LeftPanel.tsx +++ b/src/components/structures/LeftPanel.tsx @@ -25,7 +25,7 @@ import { HEADER_HEIGHT } from "../views/rooms/RoomSublist2"; import { Action } from "../../dispatcher/actions"; import UserMenu from "./UserMenu"; import RoomSearch from "./RoomSearch"; -import RoomBreadcrumbs2 from "../views/rooms/RoomBreadcrumbs2"; +import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs"; import { BreadcrumbsStore } from "../../stores/BreadcrumbsStore"; import { UPDATE_EVENT } from "../../stores/AsyncStore"; import ResizeNotifier from "../../utils/ResizeNotifier"; @@ -325,7 +325,7 @@ export default class LeftPanel extends React.Component { className="mx_LeftPanel_breadcrumbsContainer mx_AutoHideScrollbar" verticalScrollsHorizontally={true} > - + ); } diff --git a/src/components/views/rooms/RoomBreadcrumbs2.tsx b/src/components/views/rooms/RoomBreadcrumbs.tsx similarity index 90% rename from src/components/views/rooms/RoomBreadcrumbs2.tsx rename to src/components/views/rooms/RoomBreadcrumbs.tsx index c857cd9968..92e911067c 100644 --- a/src/components/views/rooms/RoomBreadcrumbs2.tsx +++ b/src/components/views/rooms/RoomBreadcrumbs.tsx @@ -28,8 +28,6 @@ import { DefaultTagID } from "../../../stores/room-list/models"; import { RovingAccessibleTooltipButton } from "../../../accessibility/RovingTabIndex"; import Toolbar from "../../../accessibility/Toolbar"; -// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367 - interface IProps { } @@ -44,7 +42,7 @@ interface IState { skipFirst: boolean; } -export default class RoomBreadcrumbs2 extends React.PureComponent { +export default class RoomBreadcrumbs extends React.PureComponent { private isMounted = true; constructor(props: IProps) { @@ -88,12 +86,12 @@ export default class RoomBreadcrumbs2 extends React.PureComponent this.viewRoom(r, i)} aria-label={_t("Room %(name)s", {name: r.name})} title={r.name} - tooltipClassName="mx_RoomBreadcrumbs2_Tooltip" + tooltipClassName="mx_RoomBreadcrumbs_Tooltip" > - + {tiles.slice(this.state.skipFirst ? 1 : 0)} ); } else { return ( -
-
+
+
{_t("No recently visited rooms")}