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:
parent
61e07c3df7
commit
6034f76167
@ -92,6 +92,10 @@
|
||||
padding: 5px 10px;
|
||||
overflow-wrap: anywhere;
|
||||
|
||||
.octo-tooltip {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.octo-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
@ -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));
|
||||
}
|
||||
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user