1
0
mirror of https://github.com/mattermost/focalboard.git synced 2024-12-03 08:45:40 +02:00

Initial implementation for URLProperty improvements:

- show preview with link and button for editing
 - minor fixes for CSS
This commit is contained in:
kamre 2022-01-05 13:36:46 +03:00
parent 61e07c3df7
commit 6034f76167
3 changed files with 74 additions and 51 deletions

View File

@ -92,6 +92,10 @@
padding: 5px 10px;
overflow-wrap: anywhere;
.octo-tooltip {
max-width: 100%;
}
.octo-icon {
margin-right: 5px;
}

View File

@ -1,39 +1,34 @@
.property-link {
.URLProperty {
display: flex;
align-items: center;
&.url {
width: 100%;
display: flex;
overflow: hidden;
.link {
flex: 1 1 auto;
padding-left: 1px;
margin-right: 4px;
white-space: nowrap;
overflow: hidden;
color: rgb(var(--center-channel-color-rgb));
text-overflow: ellipsis;
text-decoration: underline rgb(var(--center-channel-color-rgb), 0.5);
}
.Link__button {
.link:hover {
background-color: rgb(var(--center-channel-color-rgb), 0.1);
}
.Button_Edit {
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);
}
}
&:hover {
.Link__button {
.Button_Edit {
display: flex;
}
}
}
#focalboard-app .URLProperty .link:visited {
color: rgb(var(--center-channel-color-rgb));
}

View File

@ -1,13 +1,14 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {ReactNode} from 'react'
import React, {useEffect, useRef, useState} from 'react'
import Editable from '../../../widgets/editable'
import Editable, {Focusable} from '../../../widgets/editable'
import './link.scss'
import {Utils} from '../../../utils'
import LinkIcon from '../../../widgets/icons/Link'
import EditIcon from '../../../widgets/icons/edit'
import IconButton from '../../../widgets/buttons/iconButton'
type Props = {
value: string
@ -20,37 +21,60 @@ type Props = {
}
const URLProperty = (props: Props): JSX.Element => {
let link: ReactNode = null
const hasValue = Boolean(props.value?.trim())
if (hasValue) {
link = (
<a
className='Link__button'
href={Utils.ensureProtocol(props.value.trim())}
target='_blank'
rel='noreferrer'
onClick={(event) => event.stopPropagation()}
>
<LinkIcon/>
</a>
)
}
const [isEditing, setIsEditing] = useState(false)
const isEmpty = !props.value?.trim()
const showEditable = !props.readonly && (isEditing || isEmpty)
const editableRef = useRef<Focusable>(null)
useEffect(() => {
if (isEditing) {
editableRef.current?.focus()
}
}, [isEditing])
if (showEditable) {
return (
<div className='URLProperty property-link url'>
{(hasValue || props.placeholder) &&
<div className='URLProperty'>
<Editable
className='octo-propertyvalue'
ref={editableRef}
placeholderText={props.placeholder}
value={props.value}
autoExpand={true}
readonly={props.readonly}
onChange={props.onChange}
onSave={props.onSave}
onCancel={props.onCancel}
onSave={() => {
setIsEditing(false)
props.onSave()
}}
onCancel={() => {
setIsEditing(false)
props.onCancel()
}}
onFocus={() => setIsEditing(true)}
validator={props.validator}
/>
</div>
)
}
return (
<div className='URLProperty octo-propertyvalue'>
<a
className='link'
href={Utils.ensureProtocol(props.value.trim())}
target='_blank'
rel='noreferrer'
onClick={(event) => event.stopPropagation()}
>
{props.value}
</a>
{!props.readonly &&
<IconButton
className='Button_Edit'
icon={<EditIcon/>}
onClick={() => setIsEditing(true)}
/>}
{link}
</div>
)
}