mirror of
https://github.com/mattermost/focalboard.git
synced 2025-01-05 14:50:29 +02:00
GH-1284 - Fixing alignment of properties on cards (#1875)
* GH-1284 - Fixing alignment of properties on cards * Updating test
This commit is contained in:
Asaad Mahmood
GitHub
parent
2d505ce359
commit
9529ad8747
@ -30,17 +30,38 @@
|
||||
|
||||
.octo-propertyrow {
|
||||
display: flex;
|
||||
margin: 4px 0;
|
||||
align-items: center;
|
||||
margin: 6px 0;
|
||||
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 {
|
||||
font-size: 14px;
|
||||
padding: 4px 8px;
|
||||
height: 32px;
|
||||
|
||||
&:not(.readonly) {
|
||||
min-width: 180px;
|
||||
transition: background 100ms ease-out 0s;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
@ -59,6 +80,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
.UserProperty {
|
||||
.react-select__value-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.react-select__control {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.octo-propertyname {
|
||||
width: 150px;
|
||||
margin-right: 5px;
|
||||
@ -67,12 +98,13 @@
|
||||
.Button {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 8px;
|
||||
padding: 4px 8px;
|
||||
text-align: left;
|
||||
justify-content: unset;
|
||||
}
|
||||
|
||||
&.add-property {
|
||||
margin: 8px 0 0;
|
||||
color: rgba(var(--center-channel-color-rgb), 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
@ -46,6 +46,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: left;
|
||||
padding: 0;
|
||||
|
||||
&.--empty {
|
||||
opacity: 0;
|
||||
|
||||
@ -12,13 +12,13 @@ exports[`components/properties/user not readonly 1`] = `
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
/>
|
||||
<div
|
||||
class=" css-pwgt1w-Control"
|
||||
class="react-select__control css-pwgt1w-Control"
|
||||
>
|
||||
<div
|
||||
class=" css-kpfmlq-ValueContainer"
|
||||
class="react-select__value-container react-select__value-container--has-value css-kpfmlq-ValueContainer"
|
||||
>
|
||||
<div
|
||||
class=" css-ciz25-singleValue"
|
||||
class="react-select__single-value css-ciz25-singleValue"
|
||||
>
|
||||
username-1
|
||||
</div>
|
||||
@ -26,7 +26,7 @@ exports[`components/properties/user not readonly 1`] = `
|
||||
class="css-1shkodo-Input"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
class="react-select__input"
|
||||
style="display: inline-block;"
|
||||
>
|
||||
<input
|
||||
@ -48,11 +48,11 @@ exports[`components/properties/user not readonly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class=" css-1hb7zxy-IndicatorsContainer"
|
||||
class="react-select__indicators css-1hb7zxy-IndicatorsContainer"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class=" css-tpaeio-indicatorContainer"
|
||||
class="react-select__indicator react-select__clear-indicator css-tpaeio-indicatorContainer"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -68,11 +68,11 @@ exports[`components/properties/user not readonly 1`] = `
|
||||
</svg>
|
||||
</div>
|
||||
<span
|
||||
class=" css-43ykx9-indicatorSeparator"
|
||||
class="react-select__indicator-separator css-43ykx9-indicatorSeparator"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class=" css-19sxey8-indicatorContainer"
|
||||
class="react-select__indicator react-select__dropdown-indicator css-19sxey8-indicatorContainer"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -105,13 +105,13 @@ exports[`components/properties/user not readonly not existing user 1`] = `
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
/>
|
||||
<div
|
||||
class=" css-pwgt1w-Control"
|
||||
class="react-select__control css-pwgt1w-Control"
|
||||
>
|
||||
<div
|
||||
class=" css-kpfmlq-ValueContainer"
|
||||
class="react-select__value-container css-kpfmlq-ValueContainer"
|
||||
>
|
||||
<div
|
||||
class=" css-1oswhd8-placeholder"
|
||||
class="react-select__placeholder css-1oswhd8-placeholder"
|
||||
>
|
||||
Empty
|
||||
</div>
|
||||
@ -119,7 +119,7 @@ exports[`components/properties/user not readonly not existing user 1`] = `
|
||||
class="css-1shkodo-Input"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
class="react-select__input"
|
||||
style="display: inline-block;"
|
||||
>
|
||||
<input
|
||||
@ -141,14 +141,14 @@ exports[`components/properties/user not readonly not existing user 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class=" css-1hb7zxy-IndicatorsContainer"
|
||||
class="react-select__indicators css-1hb7zxy-IndicatorsContainer"
|
||||
>
|
||||
<span
|
||||
class=" css-43ykx9-indicatorSeparator"
|
||||
class="react-select__indicator-separator css-43ykx9-indicatorSeparator"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class=" css-19sxey8-indicatorContainer"
|
||||
class="react-select__indicator react-select__dropdown-indicator css-19sxey8-indicatorContainer"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -200,13 +200,13 @@ exports[`components/properties/user user dropdown open 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class=" css-pwgt1w-Control"
|
||||
class="react-select__control react-select__control--is-focused react-select__control--menu-is-open css-pwgt1w-Control"
|
||||
>
|
||||
<div
|
||||
class=" css-kpfmlq-ValueContainer"
|
||||
class="react-select__value-container react-select__value-container--has-value css-kpfmlq-ValueContainer"
|
||||
>
|
||||
<div
|
||||
class=" css-ciz25-singleValue"
|
||||
class="react-select__single-value css-ciz25-singleValue"
|
||||
>
|
||||
username-1
|
||||
</div>
|
||||
@ -214,7 +214,7 @@ exports[`components/properties/user user dropdown open 1`] = `
|
||||
class="css-1shkodo-Input"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
class="react-select__input"
|
||||
style="display: inline-block;"
|
||||
>
|
||||
<input
|
||||
@ -236,11 +236,11 @@ exports[`components/properties/user user dropdown open 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class=" css-1hb7zxy-IndicatorsContainer"
|
||||
class="react-select__indicators css-1hb7zxy-IndicatorsContainer"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class=" css-13eygzs-indicatorContainer"
|
||||
class="react-select__indicator react-select__clear-indicator css-13eygzs-indicatorContainer"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -256,11 +256,11 @@ exports[`components/properties/user user dropdown open 1`] = `
|
||||
</svg>
|
||||
</div>
|
||||
<span
|
||||
class=" css-43ykx9-indicatorSeparator"
|
||||
class="react-select__indicator-separator css-43ykx9-indicatorSeparator"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class=" css-hl9mox-indicatorContainer"
|
||||
class="react-select__indicator react-select__dropdown-indicator css-hl9mox-indicatorContainer"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -278,13 +278,13 @@ exports[`components/properties/user user dropdown open 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class=" css-l4y5re-menu"
|
||||
class="react-select__menu css-l4y5re-menu"
|
||||
>
|
||||
<div
|
||||
class=" css-g29tl0-MenuList"
|
||||
class="react-select__menu-list css-g29tl0-MenuList"
|
||||
>
|
||||
<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"
|
||||
tabindex="-1"
|
||||
>
|
||||
|
||||
@ -41,6 +41,7 @@ const UserProperty = (props: Props): JSX.Element => {
|
||||
isClearable={true}
|
||||
backspaceRemovesValue={true}
|
||||
className={'UserProperty octo-propertyvalue'}
|
||||
classNamePrefix={'react-select'}
|
||||
styles={selectStyles}
|
||||
placeholder={'Empty'}
|
||||
getOptionLabel={(o: IUser) => o.username}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user