RoomBreadcrumbs2 -> RoomBreadcrumbs
This commit is contained in:
Travis Ralston
parent
a7c18bfbfa
commit
8dfe7b6cc7
4 changed files with 16 additions and 20 deletions
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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<IProps, IState> {
|
|||
className="mx_LeftPanel_breadcrumbsContainer mx_AutoHideScrollbar"
|
||||
verticalScrollsHorizontally={true}
|
||||
>
|
||||
<RoomBreadcrumbs2 />
|
||||
<RoomBreadcrumbs />
|
||||
</IndicatorScrollbar>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<IProps, IState> {
|
||||
export default class RoomBreadcrumbs extends React.PureComponent<IProps, IState> {
|
||||
private isMounted = true;
|
||||
|
||||
constructor(props: IProps) {
|
||||
|
|
@ -88,12 +86,12 @@ export default class RoomBreadcrumbs2 extends React.PureComponent<IProps, IState
|
|||
const roomTag = roomTags.includes(DefaultTagID.DM) ? DefaultTagID.DM : roomTags[0];
|
||||
return (
|
||||
<RovingAccessibleTooltipButton
|
||||
className="mx_RoomBreadcrumbs2_crumb"
|
||||
className="mx_RoomBreadcrumbs_crumb"
|
||||
key={r.roomId}
|
||||
onClick={() => this.viewRoom(r, i)}
|
||||
aria-label={_t("Room %(name)s", {name: r.name})}
|
||||
title={r.name}
|
||||
tooltipClassName="mx_RoomBreadcrumbs2_Tooltip"
|
||||
tooltipClassName="mx_RoomBreadcrumbs_Tooltip"
|
||||
>
|
||||
<DecoratedRoomAvatar
|
||||
room={r}
|
||||
|
|
@ -111,17 +109,17 @@ export default class RoomBreadcrumbs2 extends React.PureComponent<IProps, IState
|
|||
return (
|
||||
<CSSTransition
|
||||
appear={true} in={this.state.doAnimation} timeout={640}
|
||||
classNames='mx_RoomBreadcrumbs2'
|
||||
classNames='mx_RoomBreadcrumbs'
|
||||
>
|
||||
<Toolbar className='mx_RoomBreadcrumbs2'>
|
||||
<Toolbar className='mx_RoomBreadcrumbs'>
|
||||
{tiles.slice(this.state.skipFirst ? 1 : 0)}
|
||||
</Toolbar>
|
||||
</CSSTransition>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className='mx_RoomBreadcrumbs2'>
|
||||
<div className="mx_RoomBreadcrumbs2_placeholder">
|
||||
<div className='mx_RoomBreadcrumbs'>
|
||||
<div className="mx_RoomBreadcrumbs_placeholder">
|
||||
{_t("No recently visited rooms")}
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in a new issue