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);
width: 100%;
align-items: flex-start;
.Button {
display: none;
}
&:hover {
.Button {
display: flex;
@ -24,6 +26,7 @@
display: flex;
flex-direction: column;
width: 100%;
.MenuWrapper {
position: relative;
align-self: center;
@ -33,8 +36,13 @@
.octo-propertyrow {
display: flex;
flex-direction: row;
margin: 8px 0;
margin: 4px 0;
height: 32px;
.octo-propertyvalue {
font-size: 14px;
width: 100%;
.MenuWrapper {
display: flex;
align-items: center;
@ -46,25 +54,31 @@
width: 150px;
margin-right: 5px;
color: rgba(var(--center-channel-color-rgb), 0.6);
.Button {
text-align: left;
justify-content: unset;
}
&.add-property {
color: rgba(var(--center-channel-color-rgb), 0.4);
}
}
&.content-blocks {
&:hover, &:focus-within {
&:hover,
&:focus-within {
.CardDetailContentsMenu {
.Button {
opacity: 1;
}
}
}
.CardDetailContentsMenu {
margin-left: 48px;
.Button {
opacity: 0;
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 {
display: flex;
align-items: center;
&.url {
padding-right: 2rem;
width: 100%;
}
a {
padding: 8px; // increases clickable area for better UX
.Link__button {
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 {
@ -13,8 +34,8 @@
}
&:hover {
a {
display: inline;
.Link__button {
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()) {
link = (
<a
className='Link__button'
href={Utils.ensureProtocol(props.value.trim())}
target='_blank'
rel='noreferrer'