diff --git a/mattermost-plugin/webapp/src/components/__snapshots__/rhsChannelBoardItem.test.tsx.snap b/mattermost-plugin/webapp/src/components/__snapshots__/rhsChannelBoardItem.test.tsx.snap index 9e6b24490..6171f4f2c 100644 --- a/mattermost-plugin/webapp/src/components/__snapshots__/rhsChannelBoardItem.test.tsx.snap +++ b/mattermost-plugin/webapp/src/components/__snapshots__/rhsChannelBoardItem.test.tsx.snap @@ -69,7 +69,7 @@ exports[`components/rhsChannelBoardItem render board with menu open 1`] = ` />
- Unlink board +
+ Unlink board +
+
- Cancel +
+ Cancel +
{ it('render board', async () => { + const board = createBoard() const state = { teams: { current: { @@ -22,8 +23,12 @@ describe('components/rhsChannelBoardItem', () => { display_name: 'Team name', }, }, + boards: { + myBoardMemberships: { + [board.id]: {userId: 'user_id_1', schemeAdmin: true}, + }, + } } - const board = createBoard() board.updateAt = 1657311058157 board.title = 'Test board' @@ -37,6 +42,7 @@ describe('components/rhsChannelBoardItem', () => { }) it('render board with menu open', async () => { + const board = createBoard() const state = { teams: { current: { @@ -45,8 +51,12 @@ describe('components/rhsChannelBoardItem', () => { display_name: 'Team name', }, }, + boards: { + myBoardMemberships: { + [board.id]: {userId: 'user_id_1', schemeAdmin: true}, + }, + } } - const board = createBoard() board.updateAt = 1657311058157 board.title = 'Test board' diff --git a/mattermost-plugin/webapp/src/components/rhsChannelBoardItem.tsx b/mattermost-plugin/webapp/src/components/rhsChannelBoardItem.tsx index 542fe3a38..679f68e53 100644 --- a/mattermost-plugin/webapp/src/components/rhsChannelBoardItem.tsx +++ b/mattermost-plugin/webapp/src/components/rhsChannelBoardItem.tsx @@ -15,7 +15,10 @@ import Menu from '../../../../webapp/src/widgets/menu' import MenuWrapper from '../../../../webapp/src/widgets/menuWrapper' import {SuiteWindow} from '../../../../webapp/src/types/index' +import {Permission} from '../../../../webapp/src/constants' + import './rhsChannelBoardItem.scss' +import BoardPermissionGate from '../../../../webapp/src/components/permissions/boardPermissionGate' const windowAny = (window as SuiteWindow) @@ -55,18 +58,41 @@ const RHSChannelBoardItem = (props: Props) => { }/> - } - onClick={() => { - onUnlinkBoard(board) - }} - /> + + } + onClick={() => { + onUnlinkBoard(board) + }} + /> + + + } + onClick={() => { + onUnlinkBoard(board) + }} + subText={intl.formatMessage({id: 'rhs-board-non-admin-msg', defaultMessage:'You are not an admin of the board'})} + /> +
diff --git a/mattermost-plugin/webapp/src/components/rhsChannelBoards.scss b/mattermost-plugin/webapp/src/components/rhsChannelBoards.scss index c5fc1a014..856a2bc81 100644 --- a/mattermost-plugin/webapp/src/components/rhsChannelBoards.scss +++ b/mattermost-plugin/webapp/src/components/rhsChannelBoards.scss @@ -1,9 +1,9 @@ .RHSChannelBoards { - padding: 20px; + padding: 16px 24px; height: 100%; display: flex; flex-direction: column; - gap: 10px; + gap: 16px; &.empty { display: flex; @@ -45,7 +45,8 @@ overflow-y: auto; display: flex; flex-direction: column; - gap: 10px; + gap: 16px; + min-height: 100%; } .Button { diff --git a/webapp/src/components/__snapshots__/addContentMenuItem.test.tsx.snap b/webapp/src/components/__snapshots__/addContentMenuItem.test.tsx.snap index 8f010d0e3..4f243aa13 100644 --- a/webapp/src/components/__snapshots__/addContentMenuItem.test.tsx.snap +++ b/webapp/src/components/__snapshots__/addContentMenuItem.test.tsx.snap @@ -21,9 +21,13 @@ exports[`components/addContentMenuItem return a checkbox menu item 1`] = `
- checkbox +
+ checkbox +
- divider +
+ divider +
- text +
+ text +
- image +
+ image +
- Random +
+ Random +
- Remove icon +
+ Remove icon +
- Cancel +
+ Cancel +
- Delete +
+ Delete +
- Copy link +
+ Copy link +
- New template from card +
+ New template from card +
- Cancel +
+ Cancel +
- Move up +
+ Move up +
- Move down +
+ Move down +
- Delete +
+ Delete +
- Cancel +
+ Cancel +
- view title +
+ view title +
- view title +
+ view title +
- Duplicate view +
+ Duplicate view +
- Delete view +
+ Delete view +
- Cancel +
+ Cancel +
- view title +
+ view title +
- view title +
+ view title +
- Duplicate view +
+ Duplicate view +
- Delete view +
+ Delete view +
- Cancel +
+ Cancel +
- view title +
+ view title +
- view title +
+ view title +
- Cancel +
+ Cancel +
- view title +
+ view title +
- view title +
+ view title +
- Cancel +
+ Cancel +
- Delete +
+ Delete +
- Copy link +
+ Copy link +
- Cancel +
+ Cancel +
- Delete +
+ Delete +
- Copy link +
+ Copy link +
- Cancel +
+ Cancel +
- Delete +
+ Delete +
- Duplicate +
+ Duplicate +
- Copy link +
+ Copy link +
- Cancel +
+ Cancel +
- text +
+ text +
- image +
+ image +
- divider +
+ divider +
- checkbox +
+ checkbox +
- Cancel +
+ Cancel +
- text +
+ text +
- image +
+ image +
- divider +
+ divider +
- checkbox +
+ checkbox +
- Cancel +
+ Cancel +
- text +
+ text +
- image +
+ image +
- divider +
+ divider +
- checkbox +
+ checkbox +
- Cancel +
+ Cancel +
- Text +
+ Text +
- Number +
+ Number +
- Email +
+ Email +
- Phone +
+ Phone +
- URL +
+ URL +
- Select +
+ Select +
- Multi select +
+ Multi select +
- Date +
+ Date +
- Person +
+ Person +
- Checkbox +
+ Checkbox +
- Created time +
+ Created time +
- Created by +
+ Created by +
- Last updated time +
+ Last updated time +
- Last updated by +
+ Last updated by +
- Cancel +
+ Cancel +
- Delete +
+ Delete +
- Cancel +
+ Cancel +
- Delete +
+ Delete +
- Cancel +
+ Cancel +
- Delete +
+ Delete +
- Duplicate +
+ Duplicate +
- Copy link +
+ Copy link +
- Cancel +
+ Cancel +
- Copy link +
+ Copy link +
- Cancel +
+ Cancel +
- Delete +
+ Delete +
- Duplicate +
+ Duplicate +
- Copy link +
+ Copy link +
- Cancel +
+ Cancel +
- Delete +
+ Delete +
- Duplicate +
+ Duplicate +
- Copy link +
+ Copy link +
- Cancel +
+ Cancel +
- Delete +
+ Delete +
- Duplicate +
+ Duplicate +
- Copy link +
+ Copy link +
- Cancel +
+ Cancel +
- Delete +
+ Delete +
- Duplicate +
+ Duplicate +
- Copy link +
+ Copy link +
- Cancel +
+ Cancel +
- Delete +
+ Delete +
- Duplicate +
+ Duplicate +
- Copy link +
+ Copy link +
- Cancel +
+ Cancel +
- Import archive +
+ Import archive +
- Trello +
+ Trello +
- Asana +
+ Asana +
- Notion +
+ Notion +
- Jira +
+ Jira +
- Todoist +
+ Todoist +
- Cancel +
+ Cancel +
- Product tour +
+ Product tour +
- Cancel +
+ Cancel +
- English +
+ English +
- Español +
+ Español +
- Deutsch +
+ Deutsch +
- 日本語 +
+ 日本語 +
- Français +
+ Français +
- Nederlands +
+ Nederlands +
- Pусский +
+ Pусский +
- 中文 (繁體) +
+ 中文 (繁體) +
- 中文 (简体) +
+ 中文 (简体) +
- Türkçe +
+ Türkçe +
- Occitan +
+ Occitan +
- Português (Brasil) +
+ Português (Brasil) +
- Català +
+ Català +
- Ελληνικά +
+ Ελληνικά +
- bahasa Indonesia +
+ bahasa Indonesia +
- Italiano +
+ Italiano +
- Svenska +
+ Svenska +
- Cancel +
+ Cancel +
- Product tour +
+ Product tour +
- Cancel +
+ Cancel +
- Product tour +
+ Product tour +
- Cancel +
+ Cancel +
- Delete +
+ Delete +
- Duplicate +
+ Duplicate +
- Copy link +
+ Copy link +
- Cancel +
+ Cancel +
- Delete +
+ Delete +
- Duplicate +
+ Duplicate +
- Copy link +
+ Copy link +
- Cancel +
+ Cancel +
- Delete +
+ Delete +
- Duplicate +
+ Duplicate +
- Copy link +
+ Copy link +
- Cancel +
+ Cancel +
- Hide +
+ Hide +
- Delete +
+ Delete +
- Cancel +
+ Cancel +
- Show +
+ Show +
- Cancel +
+ Cancel +
- Show +
+ Show +
- Cancel +
+ Cancel +
- Editor +
+ Editor +
- Commenter +
+ Commenter +
- Viewer +
+ Viewer +
- None +
+ None +
- Cancel +
+ Cancel +
- Editor +
+ Editor +
- Commenter +
+ Commenter +
- Viewer +
+ Viewer +
- None +
+ None +
- Cancel +
+ Cancel +
- Viewer +
+ Viewer +
- None +
+ None +
- Cancel +
+ Cancel +
- Import archive +
+ Import archive +
- Trello +
+ Trello +
- Asana +
+ Asana +
- Notion +
+ Notion +
- Jira +
+ Jira +
- Todoist +
+ Todoist +
- Cancel +
+ Cancel +
- Export archive +
+ Export archive +
- Cancel +
+ Cancel +
- Export archive +
+ Export archive +
- English +
+ English +
- Español +
+ Español +
- Deutsch +
+ Deutsch +
- 日本語 +
+ 日本語 +
- Français +
+ Français +
- Nederlands +
+ Nederlands +
- Pусский +
+ Pусский +
- 中文 (繁體) +
+ 中文 (繁體) +
- 中文 (简体) +
+ 中文 (简体) +
- Türkçe +
+ Türkçe +
- Occitan +
+ Occitan +
- Português (Brasil) +
+ Português (Brasil) +
- Català +
+ Català +
- Ελληνικά +
+ Ελληνικά +
- bahasa Indonesia +
+ bahasa Indonesia +
- Italiano +
+ Italiano +
- Svenska +
+ Svenska +
- Cancel +
+ Cancel +
- Cancel +
+ Cancel +
- Export archive +
+ Export archive +
- Cancel +
+ Cancel +
- Export archive +
+ Export archive +
- Default theme +
+ Default theme +
- Dark theme +
+ Dark theme +
- Light theme +
+ Light theme +
- System theme +
+ System theme +
- Cancel +
+ Cancel +
- Cancel +
+ Cancel +
- Sort ascending +
+ Sort ascending +
- Sort descending +
+ Sort descending +
- Insert left +
+ Insert left +
- Insert right +
+ Insert right +
- Hide +
+ Hide +
- Duplicate +
+ Duplicate +
- Delete +
+ Delete +
- Cancel +
+ Cancel +
- Sort ascending +
+ Sort ascending +
- Sort descending +
+ Sort descending +
- Insert left +
+ Insert left +
- Insert right +
+ Insert right +
- Cancel +
+ Cancel +
- Empty card +
+ Empty card +
- Empty card +
+ Empty card +
- Set as default +
+ Set as default +
- Cancel +
+ Cancel +
- Empty card +
+ Empty card +
- Title +
+ Title +
- Status +
+ Status +
- Property 1 +
+ Property 1 +
- Property 2 +
+ Property 2 +
- Property 3 +
+ Property 3 +
- Cancel +
+ Cancel +
- Title +
+ Title +
- Status +
+ Status +
- Property 1 +
+ Property 1 +
- Property 2 +
+ Property 2 +
- Property 3 +
+ Property 3 +
- Cancel +
+ Cancel +
- includes +
+ includes +
- doesn't include +
+ doesn't include +
- is empty +
+ is empty +
- is not empty +
+ is not empty +
- Cancel +
+ Cancel +
- Title +
+ Title +
- Status +
+ Status +
- Property 1 +
+ Property 1 +
- Property 2 +
+ Property 2 +
- Property 3 +
+ Property 3 +
- Cancel +
+ Cancel +
- Title +
+ Title +
- Status +
+ Status +
- Property 1 +
+ Property 1 +
- Property 2 +
+ Property 2 +
- Property 3 +
+ Property 3 +
- Cancel +
+ Cancel +
- includes +
+ includes +
- doesn't include +
+ doesn't include +
- is empty +
+ is empty +
- is not empty +
+ is not empty +
- Cancel +
+ Cancel +
- includes +
+ includes +
- doesn't include +
+ doesn't include +
- is empty +
+ is empty +
- is not empty +
+ is not empty +
- Cancel +
+ Cancel +
- includes +
+ includes +
- doesn't include +
+ doesn't include +
- is empty +
+ is empty +
- is not empty +
+ is not empty +
- Cancel +
+ Cancel +
- includes +
+ includes +
- doesn't include +
+ doesn't include +
- is empty +
+ is empty +
- is not empty +
+ is not empty +
- Cancel +
+ Cancel +
- includes +
+ includes +
- doesn't include +
+ doesn't include +
- is empty +
+ is empty +
- is not empty +
+ is not empty +
- Cancel +
+ Cancel +
- Title +
+ Title +
- Status +
+ Status +
- Property 1 +
+ Property 1 +
- Property 2 +
+ Property 2 +
- Property 3 +
+ Property 3 +
- Cancel +
+ Cancel +
- is set +
+ is set +
- is not set +
+ is not set +
- Cancel +
+ Cancel +
- is +
+ is +
- contains +
+ contains +
- doesn't contain +
+ doesn't contain +
- starts with +
+ starts with +
- doesn't start with +
+ doesn't start with +
- ends with +
+ ends with +
- doesn't end with +
+ doesn't end with +
- Cancel +
+ Cancel +
- Cancel +
+ Cancel +
- Cancel +
+ Cancel +
- Cancel +
+ Cancel +
- Empty card +
+ Empty card +
- New template +
+ New template +
- Cancel +
+ Cancel +
- Empty card +
+ Empty card +
- New template +
+ New template +
- Cancel +
+ Cancel +
- Empty card +
+ Empty card +
- New template +
+ New template +
- Cancel +
+ Cancel +
- title +
+ title +
- Set as default +
+ Set as default +
- Edit +
+ Edit +
- Delete +
+ Delete +
- Cancel +
+ Cancel +
- title +
+ title +
- Set as default +
+ Set as default +
- Edit +
+ Edit +
- Delete +
+ Delete +
- Cancel +
+ Cancel +
- title +
+ title +
- title +
+ title +
- Set as default +
+ Set as default +
- Edit +
+ Edit +
- Delete +
+ Delete +
- Cancel +
+ Cancel +
- title +
+ title +
- Set as default +
+ Set as default +
- Edit +
+ Edit +
- Delete +
+ Delete +
- Cancel +
+ Cancel +
- Export to CSV +
+ Export to CSV +
- Export board archive +
+ Export board archive +
- Cancel +
+ Cancel +
- Export to CSV +
+ Export to CSV +
- Export board archive +
+ Export board archive +
- Cancel +
+ Cancel +
- Export to CSV +
+ Export to CSV +
- Export board archive +
+ Export board archive +
- Cancel +
+ Cancel +
- Hide 1 empty groups +
+ Hide 1 empty groups +
- Ungroup +
+ Ungroup +
- Status +
+ Status +
- Property 1 +
+ Property 1 +
- Property 2 +
+ Property 2 +
- Property 3 +
+ Property 3 +
- Cancel +
+ Cancel +
- Show 1 hidden groups +
+ Show 1 hidden groups +
- Ungroup +
+ Ungroup +
- Status +
+ Status +
- Property 1 +
+ Property 1 +
- Property 2 +
+ Property 2 +
- Property 3 +
+ Property 3 +
- Cancel +
+ Cancel +
- Status +
+ Status +
- Property 1 +
+ Property 1 +
- Property 2 +
+ Property 2 +
- Property 3 +
+ Property 3 +
- Cancel +
+ Cancel +
- Hide 1 empty groups +
+ Hide 1 empty groups +
- Show 1 hidden groups +
+ Show 1 hidden groups +
- Ungroup +
+ Ungroup +
- Status +
+ Status +
- Property 1 +
+ Property 1 +
- Property 2 +
+ Property 2 +
- Property 3 +
+ Property 3 +
- Cancel +
+ Cancel +
- Cancel +
+ Cancel +
- Cancel +
+ Cancel +
- Manual +
+ Manual +
- Revert +
+ Revert +
- Name +
+ Name +
- Status +
+ Status +
- Property 1 +
+ Property 1 +
- Property 2 +
+ Property 2 +
- Property 3 +
+ Property 3 +
- Cancel +
+ Cancel +
- Text +
+ Text +
- Number +
+ Number +
- Email +
+ Email +
- Phone +
+ Phone +
- URL +
+ URL +
- Select +
+ Select +
- Multi select +
+ Multi select +
- Date +
+ Date +
- Person +
+ Person +
- Checkbox +
+ Checkbox +
- Created time +
+ Created time +
- Created by +
+ Created by +
- Last updated time +
+ Last updated time +
- Last updated by +
+ Last updated by +
- Cancel +
+ Cancel +
- Delete +
+ Delete +
- Cancel +
+ Cancel +
.menu-content { + display: block; + } + > .menu-name { overflow: hidden; text-overflow: ellipsis; @@ -98,6 +114,11 @@ text-align: left; } + > .menu-subtext { + font-size: 10px; + text-align: left; + } + > .SubmenuTriangleIcon { fill: rgba(var(--center-channel-color-rgb), 0.7); } diff --git a/webapp/src/widgets/menu/textOption.tsx b/webapp/src/widgets/menu/textOption.tsx index f0e5d2b43..93dd31c04 100644 --- a/webapp/src/widgets/menu/textOption.tsx +++ b/webapp/src/widgets/menu/textOption.tsx @@ -9,14 +9,23 @@ type TextOptionProps = MenuOptionProps & { icon?: React.ReactNode, rightIcon?: React.ReactNode, className?: string + subText?: string + disabled?: boolean } function TextOption(props:TextOptionProps): JSX.Element { - const {name, icon, rightIcon, check} = props + const {name, icon, rightIcon, check, subText, disabled} = props let className = 'MenuOption TextOption menu-option' if (props.className) { className += ' ' + props.className } + if (subText) { + className += ' menu-option--with-subtext' + } + if (disabled) { + className += ' menu-option--disabled' + } + return (
{icon ??
}
-
{name}
+
+
{name}
+ {subText &&
{subText}
} +
{rightIcon ??
}
) diff --git a/webapp/src/widgets/menuWrapper.scss b/webapp/src/widgets/menuWrapper.scss index 39324b4a5..410e44b5e 100644 --- a/webapp/src/widgets/menuWrapper.scss +++ b/webapp/src/widgets/menuWrapper.scss @@ -1,12 +1,13 @@ .MenuWrapper { position: relative; - + cursor: default; + &.disabled { cursor: default; } - - *:first-child { + + *:first-child { /* stylelint-disable property-no-vendor-prefix*/ -webkit-user-select: text; /* Chrome all / Safari all */ -moz-user-select: text; /* Firefox all */