self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2024-12-24 13:43:12 +02:00
Code Issues Releases Activity

Minor UI Changes (#4115)

Browse Source 
* Minor UI Changes

* Updating menu overflow
This commit is contained in:
Asaad Mahmood 2022-11-02 16:11:01 +05:00 committed by GitHub
parent df1b32cdfd
commit bb7b04c78b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 67 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
mattermost-plugin/webapp/src/components/rhsChannelBoards.scss
View File

@ -7,12 +7,16 @@
&.empty { &.empty {
display: flex; display: flex;
justify-content: center; justify-content: flex-start;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow: hidden; overflow: auto;
padding: 60px; padding: 60px;
@media screen and (min-height: 800px) {
justify-content: center;
}
} }
.rhs-boards-header { .rhs-boards-header {
@ -27,8 +31,7 @@
} }
.empty-paragraph { .empty-paragraph {
text-align: justify; text-align: center;
text-align-last: center;
} }
.boards-screenshots { .boards-screenshots {

78
webapp/src/components/__snapshots__/centerPanel.test.tsx.snap
View File

@ -311,7 +311,7 @@ exports[`components/centerPanel Clicking on the Hidden card count should open a
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -371,7 +371,7 @@ exports[`components/centerPanel Clicking on the Hidden card count should open a
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -571,7 +571,7 @@ exports[`components/centerPanel Clicking on the Hidden card count should open a
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -1562,7 +1562,7 @@ exports[`components/centerPanel return centerPanel and click on new card to edit
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -1622,7 +1622,7 @@ exports[`components/centerPanel return centerPanel and click on new card to edit
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -1822,7 +1822,7 @@ exports[`components/centerPanel return centerPanel and click on new card to edit
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -2089,7 +2089,7 @@ exports[`components/centerPanel return centerPanel and press touch 1 with readon
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -2127,7 +2127,7 @@ exports[`components/centerPanel return centerPanel and press touch 1 with readon
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -2252,7 +2252,7 @@ exports[`components/centerPanel return centerPanel and press touch 1 with readon
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -2619,7 +2619,7 @@ exports[`components/centerPanel return centerPanel and press touch ctrl+d for on
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -2679,7 +2679,7 @@ exports[`components/centerPanel return centerPanel and press touch ctrl+d for on
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -2879,7 +2879,7 @@ exports[`components/centerPanel return centerPanel and press touch ctrl+d for on
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -3267,7 +3267,7 @@ exports[`components/centerPanel return centerPanel and press touch del for one c
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -3327,7 +3327,7 @@ exports[`components/centerPanel return centerPanel and press touch del for one c
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -3527,7 +3527,7 @@ exports[`components/centerPanel return centerPanel and press touch del for one c
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -3915,7 +3915,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -3975,7 +3975,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -4175,7 +4175,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -4563,7 +4563,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -4623,7 +4623,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -4823,7 +4823,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -5211,7 +5211,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -5271,7 +5271,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -5471,7 +5471,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -5859,7 +5859,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -5919,7 +5919,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -6119,7 +6119,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -6507,7 +6507,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -6567,7 +6567,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -6767,7 +6767,7 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -7155,7 +7155,7 @@ exports[`components/centerPanel return centerPanel and select one card and click
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -7215,7 +7215,7 @@ exports[`components/centerPanel return centerPanel and select one card and click
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -7415,7 +7415,7 @@ exports[`components/centerPanel return centerPanel and select one card and click
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -7803,7 +7803,7 @@ exports[`components/centerPanel return centerPanel and select one card and click
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -7863,7 +7863,7 @@ exports[`components/centerPanel return centerPanel and select one card and click
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -8063,7 +8063,7 @@ exports[`components/centerPanel return centerPanel and select one card and click
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -9764,7 +9764,7 @@ exports[`components/centerPanel should match snapshot for Table 1`] = `
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -9824,7 +9824,7 @@ exports[`components/centerPanel should match snapshot for Table 1`] = `
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -9956,7 +9956,7 @@ exports[`components/centerPanel should match snapshot for Table 1`] = `
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span

8
webapp/src/components/cardBadges.scss
View File

@ -1,12 +1,18 @@
.CardBadges { .CardBadges {
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 4px;
height: 24px;
span { span {
margin-right: 8px; display: flex;
align-items: center;
margin-right: 4px;
.Icon, .Icon,
.CompassIcon { .CompassIcon {
color: rgba(var(--center-channel-color-rgb), 0.64);
fill: currentColor;
margin-right: 4px; margin-right: 4px;
} }
} }

2
webapp/src/components/table/__snapshots__/table.test.tsx.snap
View File

@ -2510,7 +2510,7 @@ exports[`components/table/Table should match snapshot with GroupBy 1`] = `
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span

12
webapp/src/components/table/__snapshots__/tableGroupHeaderRow.test.tsx.snap
View File

@ -16,7 +16,7 @@ exports[`should match snapshot on read only 1`] = `
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -60,7 +60,7 @@ exports[`should match snapshot with Group 1`] = `
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -125,7 +125,7 @@ exports[`should match snapshot, add new 1`] = `
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -190,7 +190,7 @@ exports[`should match snapshot, edit title 1`] = `
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -255,7 +255,7 @@ exports[`should match snapshot, hide group 1`] = `
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span
@ -320,7 +320,7 @@ exports[`should match snapshot, no groups 1`] = `
type="button" type="button"
> >
<i <i
class="CompassIcon icon-menu-down" class="CompassIcon icon-menu-right"
/> />
</button> </button>
<span <span

4
webapp/src/components/table/table.scss
View File

@ -91,8 +91,8 @@
} }
&.expanded { &.expanded {
.icon-menu-down { .icon-menu-right {
transform: rotate(270deg); transform: rotate(90deg);
} }
} }
} }

2
webapp/src/components/table/tableGroupHeaderRow.tsx
View File

@ -69,7 +69,7 @@ const TableGroupHeaderRow = (props: Props): JSX.Element => {
<IconButton <IconButton
icon={ icon={
<CompassIcon <CompassIcon
icon='menu-down' icon='menu-right'
/>} />}
onClick={() => (props.readonly ? {} : props.hideGroup(group.option.id || 'undefined'))} onClick={() => (props.readonly ? {} : props.hideGroup(group.option.id || 'undefined'))}
className={`octo-table-cell__expand ${props.readonly ? 'readonly' : ''}`} className={`octo-table-cell__expand ${props.readonly ? 'readonly' : ''}`}

1
webapp/src/widgets/icons/text.scss
View File

@ -1,5 +1,4 @@
.TextIcon { .TextIcon {
fill: rgba(var(--center-channel-color-rgb), 0.5);
stroke: none; stroke: none;
width: 1em; width: 1em;
height: 1em; height: 1em;

5
webapp/src/widgets/menu/menu.scss
View File

@ -16,6 +16,7 @@
border: 1px solid rgba(var(--center-channel-color-rgb), 0.16); border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
border-radius: var(--default-rad); border-radius: var(--default-rad);
box-shadow: var(--elevation-4); box-shadow: var(--elevation-4);
max-width: 320px;
cursor: default; cursor: default;
&.fixed { &.fixed {
@ -58,6 +59,7 @@
} }
.menu-option__content { .menu-option__content {
overflow: hidden;
flex: 1; flex: 1;
} }
@ -72,6 +74,7 @@
font-weight: 400; font-weight: 400;
height: 32px; height: 32px;
padding: 4px 20px; padding: 4px 20px;
white-space: nowrap;
cursor: pointer; cursor: pointer;
&.menu-option--disabled { &.menu-option--disabled {
@ -111,7 +114,7 @@
display: block; display: block;
} }
> .menu-name { .menu-name {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
flex-grow: 1; flex-grow: 1;