luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Multiple UI Improvements - (Table improvements, sidebar consistent) (#3689)

Browse source 
* Updating table layout UX and UI

* Updating table

* Updating test

* Updating sidebar UI

* Updating options icon and modal border

* Updating spacing between categories

* fix(CompassIcon): no `undefined` in `className`

* chore: update snapshots in plugin, too

Co-authored-by: Mattermod <mattermod@users.noreply.github.com>
Co-authored-by: Paul Esch-Laurent <paul.esch-laurent@mattermost.com>
This commit is contained in:
Asaad Mahmood 2022-08-18 12:50:14 +05:00 committed by GitHub
parent 765fbc88e9
commit 2be0eecf71
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
27 changed files with 1077 additions and 1691 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
mattermost-plugin/webapp/src/components/__snapshots__/boardSelector.test.tsx.snap
View file

@ -188,7 +188,7 @@ exports[`components/boardSelector renders with some results 1`] = `
class="icon"
>
<i
class="CompassIcon icon-product-boards undefined"
class="CompassIcon icon-product-boards"
/>
</span>
<div
@ -227,7 +227,7 @@ exports[`components/boardSelector renders with some results 1`] = `
class="icon"
>
<i
class="CompassIcon icon-product-boards undefined"
class="CompassIcon icon-product-boards"
/>
</span>
<div
@ -266,7 +266,7 @@ exports[`components/boardSelector renders with some results 1`] = `
class="icon"
>
<i
class="CompassIcon icon-product-boards undefined"
class="CompassIcon icon-product-boards"
/>
</span>
<div

6
mattermost-plugin/webapp/src/components/__snapshots__/boardSelectorItem.test.tsx.snap
View file

@ -12,7 +12,7 @@ exports[`components/boardSelectorItem renders board without title 1`] = `
class="icon"
>
<i
class="CompassIcon icon-product-boards undefined"
class="CompassIcon icon-product-boards"
/>
</span>
<div
@ -56,7 +56,7 @@ exports[`components/boardSelectorItem renders linked board 1`] = `
class="icon"
>
<i
class="CompassIcon icon-product-boards undefined"
class="CompassIcon icon-product-boards"
/>
</span>
<div
@ -100,7 +100,7 @@ exports[`components/boardSelectorItem renders not linked board 1`] = `
class="icon"
>
<i
class="CompassIcon icon-product-boards undefined"
class="CompassIcon icon-product-boards"
/>
</span>
<div

2
webapp/src/components/__snapshots__/cardDialog.test.tsx.snap
View file

@ -735,7 +735,7 @@ exports[`components/cardDialog return cardDialog menu content 1`] = `
class="d-flex"
>
<i
class="CompassIcon icon-plus undefined"
class="CompassIcon icon-plus"
/>
</div>
<div

1682
webapp/src/components/__snapshots__/centerPanel.test.tsx.snap
View file

File diff suppressed because it is too large Load diff

10
webapp/src/components/__snapshots__/viewTitle.test.tsx.snap
View file

@ -12,7 +12,7 @@ exports[`components/viewTitle add random icon 1`] = `
type="button"
>
<i
class="CompassIcon icon-emoticon-outline undefined"
class="CompassIcon icon-emoticon-outline"
/>
<span>
Add icon
@ -22,7 +22,7 @@ exports[`components/viewTitle add random icon 1`] = `
type="button"
>
<i
class="CompassIcon icon-eye-outline undefined"
class="CompassIcon icon-eye-outline"
/>
<span>
show description
@ -56,7 +56,7 @@ exports[`components/viewTitle hide description 1`] = `
type="button"
>
<i
class="CompassIcon icon-eye-outline undefined"
class="CompassIcon icon-eye-outline"
/>
<span>
show description
@ -107,7 +107,7 @@ exports[`components/viewTitle should match snapshot 1`] = `
type="button"
>
<i
class="CompassIcon icon-eye-off-outline undefined"
class="CompassIcon icon-eye-off-outline"
/>
<span>
hide description
@ -311,7 +311,7 @@ exports[`components/viewTitle show description 1`] = `
type="button"
>
<i
class="CompassIcon icon-eye-off-outline undefined"
class="CompassIcon icon-eye-off-outline"
/>
<span>
hide description

4
webapp/src/components/__snapshots__/workspace.test.tsx.snap
View file

@ -317,7 +317,7 @@ exports[`src/components/workspace return workspace and showcard 1`] = `
type="button"
>
<i
class="CompassIcon icon-eye-off-outline undefined"
class="CompassIcon icon-eye-off-outline"
/>
<span>
hide description
@ -1552,7 +1552,7 @@ exports[`src/components/workspace should match snapshot 1`] = `
type="button"
>
<i
class="CompassIcon icon-eye-off-outline undefined"
class="CompassIcon icon-eye-off-outline"
/>
<span>
hide description

1
webapp/src/components/boardsSwitcher/boardsSwitcher.scss
View file

@ -31,5 +31,6 @@
margin-left: 4px;
width: 28px;
height: 28px;
flex: 0 0 28px;
}
}

23
webapp/src/components/flashMessages.scss
View file

@ -5,21 +5,20 @@
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: 120px;
left: 0;
right: 0;
position: fixed;
bottom: 48px;
left: 50%;
margin-left: -160px;
margin: 0 auto;
padding: 10px 20px;
min-width: 150px;
max-width: 420px;
min-height: 50px;
color: #fff;
background: rgba(100, 100, 100, 0.8);
font-size: 18px;
width: 320px;
min-height: 48px;
color: rgba(var(--center-channel-bg-rgb), 1);
background-color: rgba(var(--center-channel-color-rgb), 0.8);
font-size: 16px;
font-weight: 600;
vertical-align: middle;
border-radius: 20px;
border-radius: 4px;
&.flashIn {
visibility: visible;

3
webapp/src/components/modal.scss
View file

@ -7,7 +7,8 @@
left: -240px;
background-color: rgb(var(--center-channel-bg-rgb));
padding: 10px;
border-radius: 3px;
border-radius: 4px;
border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
box-shadow: var(--elevation-4);
@media screen and (max-width: 430px) {

6
webapp/src/components/shareBoard/__snapshots__/shareBoard.test.tsx.snap
View file

@ -876,7 +876,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Regene
type="button"
>
<i
class="CompassIcon icon-refresh undefined"
class="CompassIcon icon-refresh"
/>
</button>
</div>
@ -3022,7 +3022,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard, and click switc
type="button"
>
<i
class="CompassIcon icon-refresh undefined"
class="CompassIcon icon-refresh"
/>
</button>
</div>
@ -3254,7 +3254,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoardComponent and cli
type="button"
>
<i
class="CompassIcon icon-refresh undefined"
class="CompassIcon icon-refresh"
/>
</button>
</div>

2
webapp/src/components/sidebar/__snapshots__/sidebarBoardItem.test.tsx.snap
View file

@ -9,7 +9,7 @@ exports[`components/sidebarBoardItem renders default icon if no custom icon set
class="octo-sidebar-icon"
>
<i
class="CompassIcon icon-product-boards undefined"
class="CompassIcon icon-product-boards"
/>
</div>
<div

10
webapp/src/components/sidebar/sidebar.scss
View file

@ -125,13 +125,17 @@
}
}
.OptionsIcon {
color: rgba(var(--sidebar-text-rgb), 0.5);
.IconButton {
color: rgba(var(--sidebar-text-rgb), 0.56);
&:hover {
color: rgb(var(--sidebar-text-rgb));
}
}
.DisclosureTriangleIcon,
.DotIcon {
fill: rgba(var(--sidebar-text-rgb), 0.5);
fill: rgba(var(--sidebar-text-rgb), 0.56);
flex-shrink: 0;
}

29
webapp/src/components/sidebar/sidebarBoardItem.scss
View file

@ -2,7 +2,7 @@
display: flex;
flex-direction: row;
font-weight: 500;
padding: 0 20px;
padding: 0 12px 0 20px;
height: 36px;
align-items: center;
gap: 8px;
@ -33,6 +33,10 @@
position: relative;
color: rgb(var(--sidebar-text-rgb));
.octo-sidebar-title {
color: inherit;
}
&:not(.subitem) {
&::before {
content: '';
@ -127,32 +131,13 @@
}
.MenuWrapper {
border-radius: 4px;
&:hover {
background: rgba(var(--sidebar-text-rgb), 0.08);
}
}
.octo-sidebar-title {
font-weight: 600;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
align-items: baseline;
.octo-icon {
margin-right: 6px;
}
.octo-sidebar-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
}
.octo-sidebar-icon {
.CompassIcon {
font-size: 18px;

19
webapp/src/components/sidebar/sidebarCategory.scss
View file

@ -1,10 +1,16 @@
.SidebarCategory {
margin-top: 12px;
&:first-child {
margin-top: 0;
}
.octo-sidebar-item {
display: flex;
flex-direction: row;
font-weight: 500;
padding: 0 16px 0 8px;
height: 36px;
height: 32px;
align-items: center;
gap: 4px;
@ -127,20 +133,27 @@
}
.MenuWrapper {
border-radius: 4px;
&:hover {
background: rgba(var(--sidebar-text-rgb), 0.08);
}
}
.octo-sidebar-title {
font-weight: 600;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: baseline;
color: rgba(var(--sidebar-text-rgb), 0.6);
color: rgba(var(--sidebar-text-rgb), 0.72);
&.category-title {
font-size: 12px;
text-transform: uppercase;
font-weight: 600;
}
.octo-icon {
margin-right: 6px;

446
webapp/src/components/table/__snapshots__/table.test.tsx.snap
View file

@ -139,39 +139,13 @@ exports[`components/table/Table extended should match snapshot with CreatedAt 1`
<div
class="action-cell octo-table-cell-btn"
>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu"
role="button"
>
<button
aria-label="MenuBtn"
class="IconButton"
title="MenuBtn"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<button
class="IconButton"
type="button"
>
<svg
class="GripIcon Icon"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 0h24v24H0V0z"
fill="none"
/>
<path
d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
/>
</svg>
<i
class="CompassIcon icon-drag-vertical"
/>
</button>
</div>
<div
@ -195,6 +169,22 @@ exports[`components/table/Table extended should match snapshot with CreatedAt 1`
value="title"
/>
</div>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<button
aria-label="MenuBtn"
class="IconButton"
title="MenuBtn"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<div
class="open-button"
>
@ -265,39 +255,13 @@ exports[`components/table/Table extended should match snapshot with CreatedAt 1`
<div
class="action-cell octo-table-cell-btn"
>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu"
role="button"
>
<button
aria-label="MenuBtn"
class="IconButton"
title="MenuBtn"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<button
class="IconButton"
type="button"
>
<svg
class="GripIcon Icon"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 0h24v24H0V0z"
fill="none"
/>
<path
d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
/>
</svg>
<i
class="CompassIcon icon-drag-vertical"
/>
</button>
</div>
<div
@ -321,6 +285,22 @@ exports[`components/table/Table extended should match snapshot with CreatedAt 1`
value="title"
/>
</div>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<button
aria-label="MenuBtn"
class="IconButton"
title="MenuBtn"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<div
class="open-button"
>
@ -599,39 +579,13 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
<div
class="action-cell octo-table-cell-btn"
>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu"
role="button"
>
<button
aria-label="MenuBtn"
class="IconButton"
title="MenuBtn"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<button
class="IconButton"
type="button"
>
<svg
class="GripIcon Icon"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 0h24v24H0V0z"
fill="none"
/>
<path
d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
/>
</svg>
<i
class="CompassIcon icon-drag-vertical"
/>
</button>
</div>
<div
@ -655,6 +609,22 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
value="title"
/>
</div>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<button
aria-label="MenuBtn"
class="IconButton"
title="MenuBtn"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<div
class="open-button"
>
@ -729,39 +699,13 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
<div
class="action-cell octo-table-cell-btn"
>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu"
role="button"
>
<button
aria-label="MenuBtn"
class="IconButton"
title="MenuBtn"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<button
class="IconButton"
type="button"
>
<svg
class="GripIcon Icon"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 0h24v24H0V0z"
fill="none"
/>
<path
d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
/>
</svg>
<i
class="CompassIcon icon-drag-vertical"
/>
</button>
</div>
<div
@ -785,6 +729,22 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
value="title"
/>
</div>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<button
aria-label="MenuBtn"
class="IconButton"
title="MenuBtn"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<div
class="open-button"
>
@ -1067,39 +1027,13 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
<div
class="action-cell octo-table-cell-btn"
>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu"
role="button"
>
<button
aria-label="MenuBtn"
class="IconButton"
title="MenuBtn"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<button
class="IconButton"
type="button"
>
<svg
class="GripIcon Icon"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 0h24v24H0V0z"
fill="none"
/>
<path
d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
/>
</svg>
<i
class="CompassIcon icon-drag-vertical"
/>
</button>
</div>
<div
@ -1123,6 +1057,22 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
value="title"
/>
</div>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<button
aria-label="MenuBtn"
class="IconButton"
title="MenuBtn"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<div
class="open-button"
>
@ -1193,39 +1143,13 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
<div
class="action-cell octo-table-cell-btn"
>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu"
role="button"
>
<button
aria-label="MenuBtn"
class="IconButton"
title="MenuBtn"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<button
class="IconButton"
type="button"
>
<svg
class="GripIcon Icon"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 0h24v24H0V0z"
fill="none"
/>
<path
d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
/>
</svg>
<i
class="CompassIcon icon-drag-vertical"
/>
</button>
</div>
<div
@ -1249,6 +1173,22 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
value="title"
/>
</div>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<button
aria-label="MenuBtn"
class="IconButton"
title="MenuBtn"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<div
class="open-button"
>
@ -1527,39 +1467,13 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
<div
class="action-cell octo-table-cell-btn"
>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu"
role="button"
>
<button
aria-label="MenuBtn"
class="IconButton"
title="MenuBtn"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<button
class="IconButton"
type="button"
>
<svg
class="GripIcon Icon"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 0h24v24H0V0z"
fill="none"
/>
<path
d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
/>
</svg>
<i
class="CompassIcon icon-drag-vertical"
/>
</button>
</div>
<div
@ -1583,6 +1497,22 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
value="title"
/>
</div>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<button
aria-label="MenuBtn"
class="IconButton"
title="MenuBtn"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<div
class="open-button"
>
@ -1657,39 +1587,13 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
<div
class="action-cell octo-table-cell-btn"
>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu"
role="button"
>
<button
aria-label="MenuBtn"
class="IconButton"
title="MenuBtn"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<button
class="IconButton"
type="button"
>
<svg
class="GripIcon Icon"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 0h24v24H0V0z"
fill="none"
/>
<path
d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
/>
</svg>
<i
class="CompassIcon icon-drag-vertical"
/>
</button>
</div>
<div
@ -1713,6 +1617,22 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
value="title"
/>
</div>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<button
aria-label="MenuBtn"
class="IconButton"
title="MenuBtn"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<div
class="open-button"
>
@ -2304,39 +2224,13 @@ exports[`components/table/Table should match snapshot 1`] = `
<div
class="action-cell octo-table-cell-btn"
>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu"
role="button"
>
<button
aria-label="MenuBtn"
class="IconButton"
title="MenuBtn"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<button
class="IconButton"
type="button"
>
<svg
class="GripIcon Icon"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 0h24v24H0V0z"
fill="none"
/>
<path
d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
/>
</svg>
<i
class="CompassIcon icon-drag-vertical"
/>
</button>
</div>
<div
@ -2360,6 +2254,22 @@ exports[`components/table/Table should match snapshot 1`] = `
value="title"
/>
</div>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<button
aria-label="MenuBtn"
class="IconButton"
title="MenuBtn"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<div
class="open-button"
>
@ -2596,18 +2506,12 @@ exports[`components/table/Table should match snapshot with GroupBy 1`] = `
style="width: 100px;"
>
<button
class="IconButton"
class="IconButton octo-table-cell__expand "
type="button"
>
<svg
class="DisclosureTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="37,35 37,65 63,50"
/>
</svg>
<i
class="CompassIcon icon-menu-down"
/>
</button>
<span
class="Label empty "

84
webapp/src/components/table/__snapshots__/tableGroupHeaderRow.test.tsx.snap
View file

@ -12,18 +12,12 @@ exports[`should match snapshot on read only 1`] = `
style="width: 100px;"
>
<button
class="IconButton readonly"
class="IconButton octo-table-cell__expand readonly"
type="button"
>
<svg
class="DisclosureTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="37,35 37,65 63,50"
/>
</svg>
<i
class="CompassIcon icon-menu-down"
/>
</button>
<span
class="Label propColorBrown "
@ -62,18 +56,12 @@ exports[`should match snapshot with Group 1`] = `
style="width: 100px;"
>
<button
class="IconButton"
class="IconButton octo-table-cell__expand "
type="button"
>
<svg
class="DisclosureTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="37,35 37,65 63,50"
/>
</svg>
<i
class="CompassIcon icon-menu-down"
/>
</button>
<span
class="Label propColorBrown "
@ -133,18 +121,12 @@ exports[`should match snapshot, add new 1`] = `
style="width: 100px;"
>
<button
class="IconButton"
class="IconButton octo-table-cell__expand "
type="button"
>
<svg
class="DisclosureTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="37,35 37,65 63,50"
/>
</svg>
<i
class="CompassIcon icon-menu-down"
/>
</button>
<span
class="Label propColorBrown "
@ -204,18 +186,12 @@ exports[`should match snapshot, edit title 1`] = `
style="width: 100px;"
>
<button
class="IconButton"
class="IconButton octo-table-cell__expand "
type="button"
>
<svg
class="DisclosureTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="37,35 37,65 63,50"
/>
</svg>
<i
class="CompassIcon icon-menu-down"
/>
</button>
<span
class="Label propColorBrown "
@ -275,18 +251,12 @@ exports[`should match snapshot, hide group 1`] = `
style="width: 100px;"
>
<button
class="IconButton"
class="IconButton octo-table-cell__expand "
type="button"
>
<svg
class="DisclosureTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="37,35 37,65 63,50"
/>
</svg>
<i
class="CompassIcon icon-menu-down"
/>
</button>
<span
class="Label propColorBrown "
@ -346,18 +316,12 @@ exports[`should match snapshot, no groups 1`] = `
style="width: 100px;"
>
<button
class="IconButton"
class="IconButton octo-table-cell__expand "
type="button"
>
<svg
class="DisclosureTriangleIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polygon
points="37,35 37,65 63,50"
/>
</svg>
<i
class="CompassIcon icon-menu-down"
/>
</button>
<span
class="Label empty "

240
webapp/src/components/table/__snapshots__/tableRow.test.tsx.snap
View file

@ -10,39 +10,13 @@ exports[`components/table/TableRow should match snapshot 1`] = `
<div
class="action-cell octo-table-cell-btn"
>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu"
role="button"
>
<button
aria-label="MenuBtn"
class="IconButton"
title="MenuBtn"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<button
class="IconButton"
type="button"
>
<svg
class="GripIcon Icon"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 0h24v24H0V0z"
fill="none"
/>
<path
d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
/>
</svg>
<i
class="CompassIcon icon-drag-vertical"
/>
</button>
</div>
<div
@ -66,6 +40,22 @@ exports[`components/table/TableRow should match snapshot 1`] = `
value="title"
/>
</div>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<button
aria-label="MenuBtn"
class="IconButton"
title="MenuBtn"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<div
class="open-button"
>
@ -93,39 +83,13 @@ exports[`components/table/TableRow should match snapshot, collapsed tree 1`] = `
<div
class="action-cell octo-table-cell-btn"
>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu"
role="button"
>
<button
aria-label="MenuBtn"
class="IconButton"
title="MenuBtn"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<button
class="IconButton"
type="button"
>
<svg
class="GripIcon Icon"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 0h24v24H0V0z"
fill="none"
/>
<path
d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
/>
</svg>
<i
class="CompassIcon icon-drag-vertical"
/>
</button>
</div>
<div
@ -149,6 +113,22 @@ exports[`components/table/TableRow should match snapshot, collapsed tree 1`] = `
value="title"
/>
</div>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<button
aria-label="MenuBtn"
class="IconButton"
title="MenuBtn"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<div
class="open-button"
>
@ -176,39 +156,13 @@ exports[`components/table/TableRow should match snapshot, display properties 1`]
<div
class="action-cell octo-table-cell-btn"
>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu"
role="button"
>
<button
aria-label="MenuBtn"
class="IconButton"
title="MenuBtn"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<button
class="IconButton"
type="button"
>
<svg
class="GripIcon Icon"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 0h24v24H0V0z"
fill="none"
/>
<path
d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
/>
</svg>
<i
class="CompassIcon icon-drag-vertical"
/>
</button>
</div>
<div
@ -232,6 +186,22 @@ exports[`components/table/TableRow should match snapshot, display properties 1`]
value="title"
/>
</div>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<button
aria-label="MenuBtn"
class="IconButton"
title="MenuBtn"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<div
class="open-button"
>
@ -297,39 +267,13 @@ exports[`components/table/TableRow should match snapshot, isSelected 1`] = `
<div
class="action-cell octo-table-cell-btn"
>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu"
role="button"
>
<button
aria-label="MenuBtn"
class="IconButton"
title="MenuBtn"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<button
class="IconButton"
type="button"
>
<svg
class="GripIcon Icon"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 0h24v24H0V0z"
fill="none"
/>
<path
d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
/>
</svg>
<i
class="CompassIcon icon-drag-vertical"
/>
</button>
</div>
<div
@ -353,6 +297,22 @@ exports[`components/table/TableRow should match snapshot, isSelected 1`] = `
value="title"
/>
</div>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<button
aria-label="MenuBtn"
class="IconButton"
title="MenuBtn"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<div
class="open-button"
>
@ -426,39 +386,13 @@ exports[`components/table/TableRow should match snapshot, resizing column 1`] =
<div
class="action-cell octo-table-cell-btn"
>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu"
role="button"
>
<button
aria-label="MenuBtn"
class="IconButton"
title="MenuBtn"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<button
class="IconButton"
type="button"
>
<svg
class="GripIcon Icon"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 0h24v24H0V0z"
fill="none"
/>
<path
d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
/>
</svg>
<i
class="CompassIcon icon-drag-vertical"
/>
</button>
</div>
<div
@ -482,6 +416,22 @@ exports[`components/table/TableRow should match snapshot, resizing column 1`] =
value="title"
/>
</div>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<button
aria-label="MenuBtn"
class="IconButton"
title="MenuBtn"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<div
class="open-button"
>

48
webapp/src/components/table/__snapshots__/tableRows.test.tsx.snap
View file

@ -10,39 +10,13 @@ exports[`components/table/TableRows should match snapshot, fire events 1`] = `
<div
class="action-cell octo-table-cell-btn"
>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu"
role="button"
>
<button
aria-label="MenuBtn"
class="IconButton"
title="MenuBtn"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<button
class="IconButton"
type="button"
>
<svg
class="GripIcon Icon"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 0h24v24H0V0z"
fill="none"
/>
<path
d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
/>
</svg>
<i
class="CompassIcon icon-drag-vertical"
/>
</button>
</div>
<div
@ -66,6 +40,22 @@ exports[`components/table/TableRows should match snapshot, fire events 1`] = `
value="title"
/>
</div>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu ml-2 mr-2"
role="button"
>
<button
aria-label="MenuBtn"
class="IconButton"
title="MenuBtn"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<div
class="open-button"
>

57
webapp/src/components/table/table.scss
View file

@ -2,8 +2,8 @@
.Table {
margin-top: 16px;
margin-left: 20px !important;
padding: 0 32px 0 0 !important;
margin-left: 0 !important;
padding: 0 20px !important;
overflow: auto;
position: relative;
flex: 1;
@ -16,6 +16,7 @@
margin-right: 15px;
margin-top: 15px;
vertical-align: middle;
border-bottom: solid 1px rgba(var(--center-channel-color-rgb), 0.08);
&.narrow {
width: 220px;
@ -23,6 +24,21 @@
> div {
margin-right: 8px;
height: auto;
&:first-child {
padding-left: 0;
border: 0;
&:hover {
background-color: transparent;
}
&:focus-within {
background: transparent;
border: 0;
}
}
&:last-child {
margin: 0;
@ -54,6 +70,7 @@
font-weight: 600;
font-size: 14px;
width: 100%;
height: 32px;
input {
background: transparent;
@ -74,18 +91,27 @@
}
&.expanded {
.DisclosureTriangleIcon {
transform: rotate(90deg);
.icon-menu-down {
transform: rotate(270deg);
}
}
}
.octo-table-cell__expand {
margin-right: 4px;
font-size: 24px;
i {
font-size: inherit;
}
}
.octo-table-cell {
flex: 0 0 auto;
display: flex;
flex-direction: row;
color: rgb(var(--center-channel-color-rgb));
border-right: solid 1px rgba(var(--center-channel-color-rgb), 0.09);
border-right: solid 1px rgba(var(--center-channel-color-rgb), 0.08);
border-left: 1px solid transparent;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
@ -96,12 +122,22 @@
position: relative;
text-overflow: ellipsis;
.optionsMenu {
display: none;
}
&:hover {
background-color: rgba(var(--center-channel-color-rgb), 0.05);
.optionsMenu {
display: block;
}
}
&.title-cell {
padding-left: 16px;
&:hover {
background: transparent;
}
}
.octo-icontitle {
@ -177,7 +213,7 @@
display: flex;
flex-direction: column;
width: fit-content;
padding-left: 60px;
padding-left: 12px;
}
.octo-table-header,
@ -215,7 +251,6 @@
.octo-table-cell {
align-items: center;
button,
.octo-propertyvalue {
font-size: inherit;
font-weight: normal;
@ -224,6 +259,12 @@
}
}
.octo-table-group {
.title-cell {
padding-left: 32px;
}
}
.octo-table-footer {
.octo-table-cell {
color: rgba(var(--center-channel-color-rgb), 0.6);

2
webapp/src/components/table/tableGroupHeaderRow.test.tsx
View file

@ -131,7 +131,7 @@ test('should match snapshot, hide group', async () => {
</Wrapper>
)
const triangle = container.querySelector('svg.DisclosureTriangleIcon')
const triangle = container.querySelector('.octo-table-cell__expand')
expect(triangle).not.toBeNull()
act(() => {

9
webapp/src/components/table/tableGroupHeaderRow.tsx
View file

@ -13,7 +13,7 @@ import Button from '../../widgets/buttons/button'
import IconButton from '../../widgets/buttons/iconButton'
import AddIcon from '../../widgets/icons/add'
import DeleteIcon from '../../widgets/icons/delete'
import DisclosureTriangle from '../../widgets/icons/disclosureTriangle'
import CompassIcon from '../../widgets/icons/compassIcon'
import HideIcon from '../../widgets/icons/hide'
import OptionsIcon from '../../widgets/icons/options'
import Menu from '../../widgets/menu'
@ -67,9 +67,12 @@ const TableGroupHeaderRow = (props: Props): JSX.Element => {
ref={(ref) => columnResize.updateRef(group.option.id, Constants.titleColumnId, ref)}
>
<IconButton
icon={<DisclosureTriangle/>}
icon={
<CompassIcon
icon='menu-down'
/>}
onClick={() => (props.readonly ? {} : props.hideGroup(group.option.id || 'undefined'))}
className={props.readonly ? 'readonly' : ''}
className={`octo-table-cell__expand ${props.readonly ? 'readonly' : ''}`}
/>
{!group.option.id &&

26
webapp/src/components/table/tableRow.scss
View file

@ -5,15 +5,15 @@
display: none;
.Button {
padding: 2px 4px;
padding: 2px 6px;
font-size: 11px;
text-transform: uppercase;
font-weight: 600;
color: rgba(var(--center-channel-color-rgb), 0.64);
background-color: rgba(var(--center-channel-color-rgb), 0.1);
background-color: rgb(var(--center-channel-bg-rgb));
box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0 0 0 1px,
rgba(var(--center-channel-color-rgb), 0.1) 0 2px 4px;
height: 90%;
height: 24px;
width: 100%;
}
}
@ -34,22 +34,14 @@
.open-button {
display: block;
}
.action-cell {
@include z-index(table-row-action-cell);
flex: 0 0 auto;
display: flex;
flex-direction: row;
color: rgb(var(--center-channel-color-rgb));
border-left: 1px solid transparent;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
box-sizing: border-box;
position: relative;
align-items: center;
left: 8px;
padding: 8px;
height: 44px;
font-size: 14px;
text-overflow: ellipsis;
position: fixed;
}
.octo-table-cell-btn {
@ -57,13 +49,13 @@
}
.title-cell {
margin-left: 60px;
margin-left: 0;
}
}
.action-cell {
display: none;
width: 60px;
margin-left: 20px;
}
.URLProperty:hover .Button_Copy {

41
webapp/src/components/table/tableRow.tsx
View file

@ -17,7 +17,7 @@ import PropertyValueElement from '../propertyValueElement'
import Menu from '../../widgets/menu'
import MenuWrapper from '../../widgets/menuWrapper'
import IconButton from '../../widgets/buttons/iconButton'
import GripIcon from '../../widgets/icons/grip'
import CompassIcon from '../../widgets/icons/compassIcon'
import OptionsIcon from '../../widgets/icons/options'
import DeleteIcon from '../../widgets/icons/delete'
import ConfirmationDialogBox, {ConfirmationDialogBoxProps} from '../confirmationDialogBox'
@ -142,24 +142,7 @@ const TableRow = (props: Props) => {
{!props.readonly && (
<div className='action-cell octo-table-cell-btn'>
<MenuWrapper
className='optionsMenu'
stopPropagationOnToggle={true}
>
<IconButton
title='MenuBtn'
icon={<OptionsIcon/>}
/>
<Menu>
<Menu.Text
icon={<DeleteIcon/>}
id='delete'
name={intl.formatMessage({id: 'TableRow.delete', defaultMessage: 'Delete'})}
onClick={handleDeleteButtonOnClick}
/>
</Menu>
</MenuWrapper>
<IconButton icon={<GripIcon/>}/>
<IconButton icon={<CompassIcon icon='drag-vertical'/>}/>
</div>
)}
@ -184,6 +167,26 @@ const TableRow = (props: Props) => {
/>
</div>
{!props.readonly && (
<MenuWrapper
className='optionsMenu ml-2 mr-2'
stopPropagationOnToggle={true}
>
<IconButton
title='MenuBtn'
icon={<OptionsIcon/>}
/>
<Menu>
<Menu.Text
icon={<DeleteIcon/>}
id='delete'
name={intl.formatMessage({id: 'TableRow.delete', defaultMessage: 'Delete'})}
onClick={handleDeleteButtonOnClick}
/>
</Menu>
</MenuWrapper>
)}
<div className='open-button'>
<Button onClick={() => props.showCard(props.card.id || '')}>
<FormattedMessage

2
webapp/src/styles/main.scss
View file

@ -55,7 +55,7 @@ html {
textarea {
background: rgb(var(--center-channel-bg-rgb));
color: rgb(var(--center-channel-color-rgb));
border-radius: 4px;
user-select: text;
}

4
webapp/src/widgets/buttons/iconButton.scss
View file

@ -1,6 +1,7 @@
.IconButton {
cursor: pointer;
border-radius: 4px;
flex: 0 0 24px;
height: 24px;
width: 24px;
padding: 0;
@ -45,18 +46,21 @@
}
&.size--large {
flex: 0 0 48px;
width: 48px;
height: 48px;
font-size: 31.2px;
}
&.size--medium {
flex: 0 0 40px;
width: 40px;
height: 40px;
font-size: 24px;
}
&.size--small {
flex: 0 0 32px;
width: 32px;
height: 32px;
font-size: 18px;

2
webapp/src/widgets/icons/compassIcon.tsx
View file

@ -12,6 +12,6 @@ export default function CompassIcon(props: Props): JSX.Element {
// All compass icon classes start with icon,
// so not expecting that prefix in props.
return (
<i className={`CompassIcon icon-${props.icon} ${props.className}`}/>
<i className={`CompassIcon icon-${props.icon}${props.className !== undefined ? ` ${props.className}` : ''}`}/>
)
}

4
webapp/src/widgets/icons/options.scss
View file

@ -1,4 +0,0 @@
.OptionsIcon {
color: rgba(var(--center-channel-color-rgb), 0.5);
font-size: 16px;
}