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

1010 - Updating text and link property (#1047)

Browse source
This commit is contained in:
Asaad Mahmood 2021-08-23 20:36:25 +05:00 committed by GitHub
parent 74161aa1ca
commit a6cd2c9272
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 43 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
webapp/src/components/cardDetail/cardDetail.scss
View file

@ -10,9 +10,11 @@
color: rgba(var(--center-channel-color-rgb), 0.4); color: rgba(var(--center-channel-color-rgb), 0.4);
width: 100%; width: 100%;
align-items: flex-start; align-items: flex-start;
.Button { .Button {
display: none; display: none;
} }
&:hover { &:hover {
.Button { .Button {
display: flex; display: flex;
@ -24,6 +26,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
.MenuWrapper { .MenuWrapper {
position: relative; position: relative;
align-self: center; align-self: center;
@ -33,8 +36,13 @@
.octo-propertyrow { .octo-propertyrow {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin: 8px 0; margin: 4px 0;
height: 32px;
.octo-propertyvalue { .octo-propertyvalue {
font-size: 14px;
width: 100%;
.MenuWrapper { .MenuWrapper {
display: flex; display: flex;
align-items: center; align-items: center;
@ -46,25 +54,31 @@
width: 150px; width: 150px;
margin-right: 5px; margin-right: 5px;
color: rgba(var(--center-channel-color-rgb), 0.6); color: rgba(var(--center-channel-color-rgb), 0.6);
.Button { .Button {
text-align: left; text-align: left;
justify-content: unset; justify-content: unset;
} }
&.add-property { &.add-property {
color: rgba(var(--center-channel-color-rgb), 0.4); color: rgba(var(--center-channel-color-rgb), 0.4);
} }
} }
&.content-blocks { &.content-blocks {
&:hover, &:focus-within {
&:hover,
&:focus-within {
.CardDetailContentsMenu { .CardDetailContentsMenu {
.Button { .Button {
opacity: 1; opacity: 1;
} }
} }
} }
.CardDetailContentsMenu { .CardDetailContentsMenu {
margin-left: 48px; margin-left: 48px;
.Button { .Button {
opacity: 0; opacity: 0;
color: rgba(var(--center-channel-color-rgb), 0.6); color: rgba(var(--center-channel-color-rgb), 0.6);

31
webapp/src/components/properties/link/link.scss
View file

@ -1,11 +1,32 @@
.focalboard-body .property-link { .focalboard-body .property-link {
display: flex;
align-items: center;
&.url { &.url {
padding-right: 2rem; width: 100%;
} }
a { .Link__button {
padding: 8px; // increases clickable area for better UX
display: none; display: none;
flex: 0 0 24px;
width: 24px;
height: 24px;
align-items: center;
justify-content: center;
border-radius: 4px;
color: rgba(var(--center-channel-color-rgb), 0.56);
font-size: 14.4px;
margin-left: 8px;
&:hover {
color: rgba(var(--center-channel-color-rgb), 0.72);
background: rgba(var(--center-channel-color-rgb), 0.08);
}
&:active {
color: var(--button-bg-rgb);
background-color: rgb(var(--button-bg-rgb), 0.16);
}
} }
a:hover { a:hover {
@ -13,8 +34,8 @@
} }
&:hover { &:hover {
a { .Link__button {
display: inline; display: flex;
} }
} }
} }

1
webapp/src/components/properties/link/link.tsx
View file

@ -22,6 +22,7 @@ const URLProperty = (props: Props): JSX.Element => {
if (props.value?.trim()) { if (props.value?.trim()) {
link = ( link = (
<a <a
className='Link__button'
href={Utils.ensureProtocol(props.value.trim())} href={Utils.ensureProtocol(props.value.trim())}
target='_blank' target='_blank'
rel='noreferrer' rel='noreferrer'