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;
|
padding: 5px 10px;
|
||||||
overflow-wrap: anywhere;
|
overflow-wrap: anywhere;
|
||||||
|
|
||||||
|
.octo-tooltip {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.octo-icon {
|
.octo-icon {
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,39 +1,34 @@
|
||||||
.property-link {
|
.URLProperty {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
&.url {
|
.link {
|
||||||
width: 100%;
|
flex: 1 1 auto;
|
||||||
display: flex;
|
padding-left: 1px;
|
||||||
|
margin-right: 4px;
|
||||||
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
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;
|
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 {
|
&:hover {
|
||||||
.Link__button {
|
.Button_Edit {
|
||||||
display: flex;
|
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.
|
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||||
// See LICENSE.txt for license information.
|
// 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 './link.scss'
|
||||||
import {Utils} from '../../../utils'
|
import {Utils} from '../../../utils'
|
||||||
import LinkIcon from '../../../widgets/icons/Link'
|
import EditIcon from '../../../widgets/icons/edit'
|
||||||
|
import IconButton from '../../../widgets/buttons/iconButton'
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
value: string
|
value: string
|
||||||
|
@ -20,37 +21,60 @@ type Props = {
|
||||||
}
|
}
|
||||||
|
|
||||||
const URLProperty = (props: Props): JSX.Element => {
|
const URLProperty = (props: Props): JSX.Element => {
|
||||||
let link: ReactNode = null
|
const [isEditing, setIsEditing] = useState(false)
|
||||||
const hasValue = Boolean(props.value?.trim())
|
const isEmpty = !props.value?.trim()
|
||||||
if (hasValue) {
|
const showEditable = !props.readonly && (isEditing || isEmpty)
|
||||||
link = (
|
const editableRef = useRef<Focusable>(null)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isEditing) {
|
||||||
|
editableRef.current?.focus()
|
||||||
|
}
|
||||||
|
}, [isEditing])
|
||||||
|
|
||||||
|
if (showEditable) {
|
||||||
|
return (
|
||||||
|
<div className='URLProperty'>
|
||||||
|
<Editable
|
||||||
|
className='octo-propertyvalue'
|
||||||
|
ref={editableRef}
|
||||||
|
placeholderText={props.placeholder}
|
||||||
|
value={props.value}
|
||||||
|
autoExpand={true}
|
||||||
|
readonly={props.readonly}
|
||||||
|
onChange={props.onChange}
|
||||||
|
onSave={() => {
|
||||||
|
setIsEditing(false)
|
||||||
|
props.onSave()
|
||||||
|
}}
|
||||||
|
onCancel={() => {
|
||||||
|
setIsEditing(false)
|
||||||
|
props.onCancel()
|
||||||
|
}}
|
||||||
|
onFocus={() => setIsEditing(true)}
|
||||||
|
validator={props.validator}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='URLProperty octo-propertyvalue'>
|
||||||
<a
|
<a
|
||||||
className='Link__button'
|
className='link'
|
||||||
href={Utils.ensureProtocol(props.value.trim())}
|
href={Utils.ensureProtocol(props.value.trim())}
|
||||||
target='_blank'
|
target='_blank'
|
||||||
rel='noreferrer'
|
rel='noreferrer'
|
||||||
onClick={(event) => event.stopPropagation()}
|
onClick={(event) => event.stopPropagation()}
|
||||||
>
|
>
|
||||||
<LinkIcon/>
|
{props.value}
|
||||||
</a>
|
</a>
|
||||||
)
|
{!props.readonly &&
|
||||||
}
|
<IconButton
|
||||||
|
className='Button_Edit'
|
||||||
return (
|
icon={<EditIcon/>}
|
||||||
<div className='URLProperty property-link url'>
|
onClick={() => setIsEditing(true)}
|
||||||
{(hasValue || props.placeholder) &&
|
|
||||||
<Editable
|
|
||||||
className='octo-propertyvalue'
|
|
||||||
placeholderText={props.placeholder}
|
|
||||||
value={props.value}
|
|
||||||
autoExpand={true}
|
|
||||||
readonly={props.readonly}
|
|
||||||
onChange={props.onChange}
|
|
||||||
onSave={props.onSave}
|
|
||||||
onCancel={props.onCancel}
|
|
||||||
validator={props.validator}
|
|
||||||
/>}
|
/>}
|
||||||
{link}
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user