Skip to content

Commit

Permalink
chore: updated style of link tooltip and codereview
Browse files Browse the repository at this point in the history
  • Loading branch information
@SaraBianchi
SaraBianchi committed Nov 29, 2022
1 parent e05cd0a commit f9ae9a4
Show file tree
Hide file tree
Showing 6 changed files with 172 additions and 92 deletions.
24 changes: 24 additions & 0 deletions src/config/RichTextEditor/LinkEntity.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import React from 'react';
import { connect } from 'react-redux';
import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';

const LinkEntity = connect((state) => ({
token: state.userSession.token,
}))((props) => {
const { token, url, target, targetUrl, download, children, dataElement } =
props;
const to = token ? url : targetUrl || url;

return (
<UniversalLink
href={to}
openLinkInNewTab={target === '_blank' || undefined}
download={download}
data-element={dataElement || null}
>
{children}
</UniversalLink>
);
});

export default LinkEntity;
118 changes: 65 additions & 53 deletions src/config/RichTextEditor/Plugins/AnchorPlugin/components/LinkButton/AddLinkForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,14 @@
* @module components/manage/AnchorPlugin/components/LinkButton/AddLinkForm
* Customizzato
* - Aggiunta gestione data-element
* - Aggiunte opzioni per la select del data-element
* - Modificate icone ed elementi per stilizzare il tooltip del link
*/

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { compose } from 'redux';

// import unionClassNames from 'union-class-names';
import cx from 'classnames';
import {
addAppURL,
Expand All @@ -36,6 +37,10 @@ const messages = defineMessages({
id: 'Enter URL or select an item',
defaultMessage: 'Enter URL or select an item',
},
placeholderLighthouse: {
id: 'Select a data-element ID',
defaultMessage: 'Seleziona un data-element ID', // TO DO: da sistemare quando si risolve il bug su i18n
},
});

/**
Expand All @@ -52,10 +57,6 @@ class AddLinkForm extends Component {
openObjectBrowser: PropTypes.func.isRequired,
};

static defaultProps = {
placeholder: 'Enter URL or select an item',
};

/**
* Constructor
* @method constructor
Expand All @@ -76,6 +77,15 @@ class AddLinkForm extends Component {
this.onChange = this.onChange.bind(this);
this.onKeyDown = this.onKeyDown.bind(this);
this.onSubmit = this.onSubmit.bind(this);

// Options to data-element select
this.selectOptions = [
['appointment-booking', 'appointment-booking'],
['faq', 'faq'],
['report-inefficency', 'report-inefficency'],
['accessibility-link', 'accessibility-link'],
['privacy-policy-link', 'privacy-policy-link'],
];
}

/**
Expand Down Expand Up @@ -231,23 +241,10 @@ class AddLinkForm extends Component {

return (
<div className="link-form-container" ref={this.linkFormContainer}>
<div
style={{ marginLeft: '5px', display: 'flex', alignItems: 'center' }}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 36 36"
fill="#B8B2C8"
>
<g fillRule="evenodd">
<path d="M27.1318,7.333 C24.4028,4.604 19.9618,4.604 17.2328,7.333 L12.9898,11.576 C11.8428,12.723 11.1288,14.248 10.9778,15.871 C10.8228,17.541 11.2708,19.211 12.2378,20.576 C12.4818,20.919 12.7278,21.213 12.9888,21.475 C13.7848,22.271 14.7778,22.868 15.8608,23.202 C16.5498,23.415 17.2548,23.519 17.9518,23.518 C19.7808,23.518 21.5598,22.804 22.8888,21.475 L23.9498,20.414 L22.5358,19 L21.4748,20.061 C20.1648,21.371 18.2388,21.842 16.4498,21.291 C15.6668,21.049 14.9778,20.635 14.4038,20.061 C14.2218,19.879 14.0478,19.668 13.8698,19.418 C13.1778,18.443 12.8588,17.249 12.9688,16.056 C13.0768,14.896 13.5868,13.808 14.4038,12.99 L18.6468,8.747 C20.5958,6.798 23.7688,6.798 25.7178,8.747 C26.6568,9.687 27.1748,10.942 27.1748,12.283 C27.1748,13.623 26.6568,14.878 25.7178,15.818 L27.1318,17.232 C28.4488,15.915 29.1748,14.157 29.1748,12.283 C29.1748,10.408 28.4488,8.65 27.1318,7.333" />
<path d="M25.0107,16.5254 C24.2147,15.7294 23.2217,15.1324 22.1387,14.7984 C19.6417,14.0284 16.9477,14.6894 15.1107,16.5254 L14.0507,17.5864 L15.4647,19.0004 L16.5247,17.9394 C17.8357,16.6294 19.7587,16.1554 21.5497,16.7094 C22.3337,16.9514 23.0217,17.3644 23.5957,17.9394 C23.7777,18.1214 23.9527,18.3314 24.1307,18.5824 C24.8217,19.5564 25.1417,20.7514 25.0317,21.9444 C24.9237,23.1034 24.4137,24.1924 23.5957,25.0104 L19.3537,29.2534 C17.4047,31.2024 14.2317,31.2024 12.2817,29.2534 C11.3427,28.3134 10.8247,27.0574 10.8247,25.7174 C10.8247,24.3774 11.3427,23.1214 12.2817,22.1824 L10.8677,20.7684 C9.5507,22.0854 8.8247,23.8424 8.8247,25.7174 C8.8247,27.5924 9.5507,29.3504 10.8677,30.6674 C12.2327,32.0314 14.0257,32.7134 15.8177,32.7134 C17.6107,32.7134 19.4027,32.0314 20.7677,30.6674 L25.0107,26.4244 C26.1567,25.2774 26.8717,23.7524 27.0227,22.1294 C27.1777,20.4594 26.7297,18.7894 25.7617,17.4244 C25.5177,17.0814 25.2717,16.7874 25.0107,16.5254" />
</g>
</svg>
<Form.Field inline>
<div className="wrapper">
<Form.Field>
<div className="wrapper-fields">
{/* INPUT LINK */}
<div className="wrap-field">
<Input
className={className}
id={`field-link`}
Expand All @@ -260,19 +257,6 @@ class AddLinkForm extends Component {
onKeyDown={this.onKeyDown}
ref={this.onRef}
/>
<SelectWidget
id="field-data-element"
title="data-element"
placeholder="Seleziona un data-element"
isMulti={false}
value={dataElement}
onChange={(_, value) => {
this.setState({ dataElement: value });
}}
choices={[['lighthouse_faq', 'faq']]}
noValueOption={false}
wrapped={false}
/>
{value.length > 0 ? (
<Button.Group>
<Button
Expand All @@ -284,7 +268,7 @@ class AddLinkForm extends Component {
this.clear();
}}
>
<Icon name={clearSVG} size="24px" />
<Icon name={clearSVG} size="20px" />
</Button>
</Button.Group>
) : (
Expand All @@ -305,27 +289,55 @@ class AddLinkForm extends Component {
});
}}
>
<Icon name={navTreeSVG} size="24px" />
<Icon name={navTreeSVG} size="22px" />
</Button>
</Button.Group>
)}
<Button.Group>
<Button
basic
primary
disabled={!value.length > 0}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
this.onSubmit();
}}
>
<Icon name={aheadSVG} size="24px" />
</Button>
</Button.Group>
</div>
</Form.Field>
</div>

{/* DATA-ELEMENT SELECT */}
<div className="wrap-field">
<SelectWidget
id="data-element-select"
title="data-element"
placeholder={this.props.intl.formatMessage(
messages.placeholderLighthouse,
)}
isMulti={false}
value={dataElement}
onChange={(_, value) => {
this.setState({ dataElement: value });
}}
choices={this.selectOptions}
noValueOption={false}
wrapped={false}
/>
</div>
</div>

{/* BUTTON SUBMIT */}
<div className="wrapper-submit">
<Button.Group>
<Button
basic
primary
disabled={!value.length > 0}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
this.onSubmit();
}}
onKeyDown={(e) => {
e.preventDefault();
e.stopPropagation();
this.onSubmit();
}}
>
<Icon name={aheadSVG} size="28px" />
</Button>
</Button.Group>
</div>
</Form.Field>
</div>
);
}
Expand Down
10 changes: 5 additions & 5 deletions src/config/RichTextEditor/Plugins/AnchorPlugin/components/LinkButton/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
/**
* Customizzato:
* - aggiunta gestione data-element
* - Aggiunta gestione data-element
* - Importato AddLinkForm file customizzato
*/
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import EditorUtils from '@plone/volto/components/manage/AnchorPlugin/utils/EditorUtils';
import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
import AddLinkForm from './AddLinkForm';
import EditorUtils from '@plone/volto/components/manage/AnchorPlugin/utils/EditorUtils';
import Icon from '@plone/volto/components/theme/Icon/Icon';

import AddLinkForm from 'design-comuni-plone-theme/config/RichTextEditor/Plugins/AnchorPlugin/components/LinkButton/AddLinkForm';

import linkSVG from '@plone/volto/icons/link.svg';
import unlinkSVG from '@plone/volto/icons/unlink.svg';

// import unionClassNames from 'union-class-names';

/**
* Add link form class.
* @class LinkButton
Expand Down
8 changes: 4 additions & 4 deletions src/config/RichTextEditor/Plugins/AnchorPlugin/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
/**
* Customizzato
* - customizzato per cambiare gli import dei link per poterli customizzare
* - Cambiato import dei link per poter customizzare i file
*/
import decorateComponentWithProps from 'decorate-component-with-props';

import DefaultLink from '@italia/config/RichTextEditor/Plugins/AnchorPlugin/components/Link';
import LinkButton from '@italia/config/RichTextEditor/Plugins/AnchorPlugin/components/LinkButton';
import linkStrategy, {
matchesEntityType,
} from '@plone/volto/components/manage/AnchorPlugin/linkStrategy';

import DefaultLink from 'design-comuni-plone-theme/config/RichTextEditor/Plugins/AnchorPlugin/components/Link';
import LinkButton from 'design-comuni-plone-theme/config/RichTextEditor/Plugins/AnchorPlugin/components/LinkButton';

function unboundRemoveEntity(editorState) {
const contentState = editorState.getCurrentContent();
const selectionState = editorState.getSelection();
Expand Down
32 changes: 2 additions & 30 deletions src/config/RichTextEditor/config.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
import React from 'react';
import { connect } from 'react-redux';

import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
import Styles from '@plone/volto/config/RichTextEditor/Styles';

import ToHTMLRenderers from '@plone/volto/config/RichTextEditor/ToHTML';
Expand All @@ -17,6 +14,8 @@ import CalloutsButton from 'design-comuni-plone-theme/config/RichTextEditor/Tool
import ButtonsButton from 'design-comuni-plone-theme/config/RichTextEditor/ToolbarButtons/ButtonsButton';
import TextSizeButton from 'design-comuni-plone-theme/config/RichTextEditor/ToolbarButtons/TextSizeButton';

import LinkEntity from 'design-comuni-plone-theme/config/RichTextEditor/LinkEntity';

const ItaliaRichTextEditorPlugins = (props) => [];
const ItaliaRichTextEditorInlineToolbarButtons = (props, plugins) => {
const linkPlugin = plugins.filter((p) => p.LinkButton != null)[0];
Expand Down Expand Up @@ -213,33 +212,6 @@ export default function applyConfig(config) {
};
};

const LinkEntity = connect((state) => ({
token: state.userSession.token,
}))((props) => {
const {
token,
// key,
url,
target,
targetUrl,
download,
children,
dataElement,
} = props;
const to = token ? url : targetUrl || url;

return (
<UniversalLink
href={to}
openLinkInNewTab={target === '_blank' || undefined}
download={download}
data-element={dataElement}
>
{children}
</UniversalLink>
);
});

// TODO: rimuovere questa customizzazione quando sistemano https://github.com/plone/volto/issues/1601
config.settings.richtextViewSettings.ToHTMLRenderers = {
...config.settings.richtextViewSettings.ToHTMLRenderers,
Expand Down
72 changes: 72 additions & 0 deletions theme/_cms-ui.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,78 @@ body.cms-ui {
}
}

// Link button and tooltip
.link-form-container {
display: flex;
padding: 0.3rem 0;

.field {
display: flex;

.wrap-field {
display: flex;
align-items: center;

.input-anchorlink-theme input:focus,
.ui.icon.button:focus,
.ui.basic.button:focus {
outline: solid 2px $focus-outline-color;
border-radius: 0;
}

.cancel .icon {
fill: #e40166 !important;
}
}

input#field-link {
color: #444;
font-weight: normal;
height: auto;
}

#field-data-element-select {
min-width: 220px;
width: 100%;
height: 34px;
font-family: 'Poppins', 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-size: 0.8rem;
position: relative;
font-weight: normal;
font-style: normal;
padding: 0 7px 0 12px;
margin-top: 0.2rem;
background-color: transparent;
color: #444;

.react-select__control {
min-height: 0;
background-color: #fafafa;

.react-select__single-value {
color: #444;
font-weight: normal;
}

.react-select__placeholder {
opacity: 0.4;
}
}
}

.wrapper-submit {
display: flex;
justify-content: flex-end;
padding-left: 0.8rem;

.ui.basic.button:focus {
outline: solid 2px $focus-outline-color;
border-radius: 0;
}
}
}
}

.skiplinks {
position: absolute;
top: -100%;
Expand Down

0 comments on commit f9ae9a4

Please sign in to comment.