self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2025-01-20 18:28:25 +02:00
Code Issues Releases Activity

GH-1284 - Fixing alignment of properties on cards (#1875)

Browse Source 
* GH-1284 - Fixing alignment of properties on cards

* Updating test
This commit is contained in:
Asaad Mahmood 2021-11-26 21:27:35 +05:00 committed by GitHub
parent 2d505ce359
commit 9529ad8747
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 63 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
webapp/src/components/cardDetail/cardDetail.scss
View File

@ -30,17 +30,38 @@
.octo-propertyrow { .octo-propertyrow {
display: flex; display: flex;
margin: 4px 0; align-items: center;
margin: 6px 0;
height: 32px; height: 32px;
.Switch {
margin-left: 8px;
width: 40px;
height: 24px;
box-sizing: border-box;
padding: 2px;
.octo-switch-inner {
width: 20px;
height: 20px;
}
&.on {
.octo-switch-inner {
transform: translateX(16px) translateY(0);
}
}
}
.octo-propertyvalue { .octo-propertyvalue {
font-size: 14px; font-size: 14px;
padding: 4px 8px;
height: 32px;
&:not(.readonly) { &:not(.readonly) {
min-width: 180px; min-width: 180px;
transition: background 100ms ease-out 0s; transition: background 100ms ease-out 0s;
cursor: pointer; cursor: pointer;
padding: 4px 8px;
border-radius: 4px; border-radius: 4px;
&:hover { &:hover {
@ -59,6 +80,16 @@
} }
} }
.UserProperty {
.react-select__value-container {
padding: 0;
}
.react-select__control {
margin-top: 0;
}
}
.octo-propertyname { .octo-propertyname {
width: 150px; width: 150px;
margin-right: 5px; margin-right: 5px;
@ -67,12 +98,13 @@
.Button { .Button {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 8px; padding: 4px 8px;
text-align: left; text-align: left;
justify-content: unset; justify-content: unset;
} }
&.add-property { &.add-property {
margin: 8px 0 0;
color: rgba(var(--center-channel-color-rgb), 0.4); color: rgba(var(--center-channel-color-rgb), 0.4);
} }
} }

1
webapp/src/components/properties/dateRange/dateRange.scss
View File

@ -46,6 +46,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
justify-content: left; justify-content: left;
padding: 0;
&.--empty { &.--empty {
opacity: 0; opacity: 0;

52
webapp/src/components/properties/user/__snapshots__/user.test.tsx.snap
View File

@ -12,13 +12,13 @@ exports[`components/properties/user not readonly 1`] = `
class="css-1f43avz-a11yText-A11yText" class="css-1f43avz-a11yText-A11yText"
/> />
<div <div
class=" css-pwgt1w-Control" class="react-select__control css-pwgt1w-Control"
> >
<div <div
class=" css-kpfmlq-ValueContainer" class="react-select__value-container react-select__value-container--has-value css-kpfmlq-ValueContainer"
> >
<div <div
class=" css-ciz25-singleValue" class="react-select__single-value css-ciz25-singleValue"
> >
username-1 username-1
</div> </div>
@ -26,7 +26,7 @@ exports[`components/properties/user not readonly 1`] = `
class="css-1shkodo-Input" class="css-1shkodo-Input"
> >
<div <div
class="" class="react-select__input"
style="display: inline-block;" style="display: inline-block;"
> >
<input <input
@ -48,11 +48,11 @@ exports[`components/properties/user not readonly 1`] = `
</div> </div>
</div> </div>
<div <div
class=" css-1hb7zxy-IndicatorsContainer" class="react-select__indicators css-1hb7zxy-IndicatorsContainer"
> >
<div <div
aria-hidden="true" aria-hidden="true"
class=" css-tpaeio-indicatorContainer" class="react-select__indicator react-select__clear-indicator css-tpaeio-indicatorContainer"
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
@ -68,11 +68,11 @@ exports[`components/properties/user not readonly 1`] = `
</svg> </svg>
</div> </div>
<span <span
class=" css-43ykx9-indicatorSeparator" class="react-select__indicator-separator css-43ykx9-indicatorSeparator"
/> />
<div <div
aria-hidden="true" aria-hidden="true"
class=" css-19sxey8-indicatorContainer" class="react-select__indicator react-select__dropdown-indicator css-19sxey8-indicatorContainer"
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
@ -105,13 +105,13 @@ exports[`components/properties/user not readonly not existing user 1`] = `
class="css-1f43avz-a11yText-A11yText" class="css-1f43avz-a11yText-A11yText"
/> />
<div <div
class=" css-pwgt1w-Control" class="react-select__control css-pwgt1w-Control"
> >
<div <div
class=" css-kpfmlq-ValueContainer" class="react-select__value-container css-kpfmlq-ValueContainer"
> >
<div <div
class=" css-1oswhd8-placeholder" class="react-select__placeholder css-1oswhd8-placeholder"
> >
Empty Empty
</div> </div>
@ -119,7 +119,7 @@ exports[`components/properties/user not readonly not existing user 1`] = `
class="css-1shkodo-Input" class="css-1shkodo-Input"
> >
<div <div
class="" class="react-select__input"
style="display: inline-block;" style="display: inline-block;"
> >
<input <input
@ -141,14 +141,14 @@ exports[`components/properties/user not readonly not existing user 1`] = `
</div> </div>
</div> </div>
<div <div
class=" css-1hb7zxy-IndicatorsContainer" class="react-select__indicators css-1hb7zxy-IndicatorsContainer"
> >
<span <span
class=" css-43ykx9-indicatorSeparator" class="react-select__indicator-separator css-43ykx9-indicatorSeparator"
/> />
<div <div
aria-hidden="true" aria-hidden="true"
class=" css-19sxey8-indicatorContainer" class="react-select__indicator react-select__dropdown-indicator css-19sxey8-indicatorContainer"
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
@ -200,13 +200,13 @@ exports[`components/properties/user user dropdown open 1`] = `
</span> </span>
</span> </span>
<div <div
class=" css-pwgt1w-Control" class="react-select__control react-select__control--is-focused react-select__control--menu-is-open css-pwgt1w-Control"
> >
<div <div
class=" css-kpfmlq-ValueContainer" class="react-select__value-container react-select__value-container--has-value css-kpfmlq-ValueContainer"
> >
<div <div
class=" css-ciz25-singleValue" class="react-select__single-value css-ciz25-singleValue"
> >
username-1 username-1
</div> </div>
@ -214,7 +214,7 @@ exports[`components/properties/user user dropdown open 1`] = `
class="css-1shkodo-Input" class="css-1shkodo-Input"
> >
<div <div
class="" class="react-select__input"
style="display: inline-block;" style="display: inline-block;"
> >
<input <input
@ -236,11 +236,11 @@ exports[`components/properties/user user dropdown open 1`] = `
</div> </div>
</div> </div>
<div <div
class=" css-1hb7zxy-IndicatorsContainer" class="react-select__indicators css-1hb7zxy-IndicatorsContainer"
> >
<div <div
aria-hidden="true" aria-hidden="true"
class=" css-13eygzs-indicatorContainer" class="react-select__indicator react-select__clear-indicator css-13eygzs-indicatorContainer"
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
@ -256,11 +256,11 @@ exports[`components/properties/user user dropdown open 1`] = `
</svg> </svg>
</div> </div>
<span <span
class=" css-43ykx9-indicatorSeparator" class="react-select__indicator-separator css-43ykx9-indicatorSeparator"
/> />
<div <div
aria-hidden="true" aria-hidden="true"
class=" css-hl9mox-indicatorContainer" class="react-select__indicator react-select__dropdown-indicator css-hl9mox-indicatorContainer"
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
@ -278,13 +278,13 @@ exports[`components/properties/user user dropdown open 1`] = `
</div> </div>
</div> </div>
<div <div
class=" css-l4y5re-menu" class="react-select__menu css-l4y5re-menu"
> >
<div <div
class=" css-g29tl0-MenuList" class="react-select__menu-list css-g29tl0-MenuList"
> >
<div <div
class=" css-xoibch-option" class="react-select__option react-select__option--is-focused react-select__option--is-selected css-xoibch-option"
id="react-select-4-option-0" id="react-select-4-option-0"
tabindex="-1" tabindex="-1"
> >

1
webapp/src/components/properties/user/user.tsx
View File

@ -41,6 +41,7 @@ const UserProperty = (props: Props): JSX.Element => {
isClearable={true} isClearable={true}
backspaceRemovesValue={true} backspaceRemovesValue={true}
className={'UserProperty octo-propertyvalue'} className={'UserProperty octo-propertyvalue'}
classNamePrefix={'react-select'}
styles={selectStyles} styles={selectStyles}
placeholder={'Empty'} placeholder={'Empty'}
getOptionLabel={(o: IUser) => o.username} getOptionLabel={(o: IUser) => o.username}