From 198958dcdd360baa20fe7459f5b0535edf7a3286 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 30 Jun 2020 22:32:59 +0100 Subject: [PATCH] Iterate to match figma Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/_common.scss | 2 +- res/css/views/rooms/_RoomTile2.scss | 13 ++++ src/components/structures/UserMenu.tsx | 12 ++-- src/components/views/rooms/RoomTile2.tsx | 79 +++++++++++++++++------- src/i18n/strings/en_EN.json | 3 +- 5 files changed, 80 insertions(+), 29 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 0d057d96ab..880b01a10e 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -652,7 +652,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { max-width: 16px; } - span:last-child { // labels + span.mx_IconizedContextMenu_label { // labels padding-left: 14px; width: 100%; flex: 1; diff --git a/res/css/views/rooms/_RoomTile2.scss b/res/css/views/rooms/_RoomTile2.scss index 78a7732882..8933c73045 100644 --- a/res/css/views/rooms/_RoomTile2.scss +++ b/res/css/views/rooms/_RoomTile2.scss @@ -166,6 +166,9 @@ limitations under the License. .mx_RoomTile2_iconBellCrossed::before { mask-image: url('$(res)/img/feather-customised/bell-crossed.svg'); } +.mx_RoomTile2_iconCheck::before { + mask-image: url('$(res)/img/feather-customised/check.svg'); +} .mx_RoomTile2_contextMenu { .mx_RoomTile2_contextMenu_redRow { @@ -178,6 +181,16 @@ limitations under the License. } } + .mx_RoomTile2_contextMenu_activeRow { + &.mx_AccessibleButton, .mx_AccessibleButton { + color: $accent-color !important; // !important to override styles from context menu + } + + .mx_IconizedContextMenu_icon::before { + background-color: $accent-color; + } + } + .mx_IconizedContextMenu_icon { position: relative; width: 16px; diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx index bd222c7f25..4a45162902 100644 --- a/src/components/structures/UserMenu.tsx +++ b/src/components/structures/UserMenu.tsx @@ -233,29 +233,29 @@ export default class UserMenu extends React.Component { {homeButton} this.onSettingsOpen(e, USER_NOTIFICATIONS_TAB)}> - {_t("Notification settings")} + {_t("Notification settings")} this.onSettingsOpen(e, USER_SECURITY_TAB)}> - {_t("Security & privacy")} + {_t("Security & privacy")} this.onSettingsOpen(e, null)}> - {_t("All settings")} + {_t("All settings")} - {_t("Archived rooms")} + {_t("Archived rooms")} - {_t("Feedback")} + {_t("Feedback")}
- {_t("Sign out")} + {_t("Sign out")}
diff --git a/src/components/views/rooms/RoomTile2.tsx b/src/components/views/rooms/RoomTile2.tsx index f290edc5dd..4ed167d594 100644 --- a/src/components/views/rooms/RoomTile2.tsx +++ b/src/components/views/rooms/RoomTile2.tsx @@ -32,7 +32,7 @@ import NotificationBadge, { TagSpecificNotificationState } from "./NotificationBadge"; import { _t } from "../../../languageHandler"; -import { ContextMenu, ContextMenuButton } from "../../structures/ContextMenu"; +import { ContextMenu, ContextMenuButton, MenuItemRadio } from "../../structures/ContextMenu"; import { DefaultTagID, TagID } from "../../../stores/room-list/models"; import { MessagePreviewStore } from "../../../stores/room-list/MessagePreviewStore"; import RoomTileIcon from "./RoomTileIcon"; @@ -73,6 +73,34 @@ const contextMenuBelow = (elementRect) => { return {left, top, chevronFace}; }; +type State = ALL_MESSAGES_LOUD | ALL_MESSAGES | MENTIONS_ONLY | MUTE; + +interface INotifOptionProps { + active: boolean; + iconClassName: string; + label: string; + onClick(); +} + +const NotifOption: React.FC = ({active, onClick, iconClassName, label}) => { + const classes = classNames({ + mx_RoomTile2_contextMenu_activeRow: active, + }); + + let activeIcon; + if (active) { + activeIcon = ; + } + + return ( + + + { label } + { activeIcon } + + ); +}; + export default class RoomTile2 extends React.Component { private notificationsMenuButtonRef: React.RefObject = createRef(); private generalMenuButtonRef: React.RefObject = createRef(); @@ -178,6 +206,8 @@ export default class RoomTile2 extends React.Component { private renderNotificationsMenu(): React.ReactElement { if (this.props.isMinimized) return null; // no menu when minimized + const state = getRoomNotifsState(this.props.room.roomId); + let contextMenu = null; if (this.state.notificationsMenuDisplayed) { const elementRect = this.notificationsMenuButtonRef.current.getBoundingClientRect(); @@ -185,29 +215,36 @@ export default class RoomTile2 extends React.Component {
- - - {_t("All messages")} - - - - {_t("Default")} - - - - {_t("Mentions & Keywords")} - - - - {_t("None")} - + + + +
); } - const state = getRoomNotifsState(this.props.room.roomId); const classes = classNames("mx_RoomTile2_notificationsButton", { // Show bell icon for the default case too. mx_RoomTile2_iconBell: state === ALL_MESSAGES_LOUD || state === ALL_MESSAGES, @@ -244,17 +281,17 @@ export default class RoomTile2 extends React.Component {
this.onTagRoom(e, DefaultTagID.Favourite)}> - {_t("Favourite")} + {_t("Favourite")} - {_t("Settings")} + {_t("Settings")}
- {_t("Leave Room")} + {_t("Leave Room")}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index e056576cb1..b23264a297 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1218,11 +1218,11 @@ "%(count)s unread messages.|one": "1 unread message.", "Unread mentions.": "Unread mentions.", "Unread messages.": "Unread messages.", + "Use default": "Use default", "All messages": "All messages", "Mentions & Keywords": "Mentions & Keywords", "Notification options": "Notification options", "Favourite": "Favourite", - "Low Priority": "Low Priority", "Leave Room": "Leave Room", "Room options": "Room options", "Add a topic": "Add a topic", @@ -1903,6 +1903,7 @@ "Mentions only": "Mentions only", "Leave": "Leave", "Forget": "Forget", + "Low Priority": "Low Priority", "Direct Chat": "Direct Chat", "Clear status": "Clear status", "Update status": "Update status",