Skip to content

Commit

Permalink
Fix draggable blocks and style pull quote preview (#4285)
Browse files Browse the repository at this point in the history
thecalcc authored Jul 5, 2023
1 parent 21dc6e7 commit 36e6a58
Showing 11 changed files with 120 additions and 56 deletions.
66 changes: 33 additions & 33 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -119,7 +119,7 @@
"sass-loader": "6.0.6",
"shortid": "2.2.8",
"style-loader": "0.20.2",
"superdesk-ui-framework": "3.0.30",
"superdesk-ui-framework": "^3.0.39",
"ts-loader": "3.5.0",
"tslint": "5.11.0",
"typescript": "~4.9.5",
Original file line number Diff line number Diff line change
@@ -6,6 +6,7 @@ import {
getEditor3RichFormattingOptions,
} from '../directives/ContentProfileSchemaEditor';
import {IArticleField} from 'superdesk-api';
import {gettext} from 'core/utils';

interface IProps {
value: Array<string> | null;
@@ -46,9 +47,9 @@ export class FormattingOptionsTreeSelect extends React.Component<IProps> {
value={values}
allowMultiple
fullWidth
label={gettext('Formatting options')}
labelHidden
inlineLabel
width="100%"
/>
);
}
1 change: 1 addition & 0 deletions scripts/core/editor3/components/Editor3Component.tsx
Original file line number Diff line number Diff line change
@@ -521,6 +521,7 @@ export class Editor3Component extends React.Component<IProps, IState> {
// eslint-disable-next-line react/no-find-dom-node
this.editorNode.current = this.editor === null ?
undefined :
// eslint-disable-next-line react/no-find-dom-node
ReactDOM.findDOMNode(this.editor) as HTMLDivElement;
}

52 changes: 43 additions & 9 deletions scripts/core/editor3/components/media/dragable-editor3-block.tsx
Original file line number Diff line number Diff line change
@@ -2,41 +2,75 @@ import React from 'react';
import {ContentBlock} from 'draft-js';
import {EDITOR_BLOCK_TYPE} from 'core/editor3/constants';
import {connect} from 'react-redux';
import {Spacer} from 'core/ui/components/SubNav/Spacer';
import {DragHandle} from 'superdesk-ui-framework/react';

interface IProps {
block: ContentBlock;
readOnly?: boolean; // connected
children: React.ReactNode;
}

class DragableEditor3BlockComponent extends React.PureComponent<IProps> {
interface IState {
displayHandle: boolean;
}

class DragableEditor3BlockComponent extends React.PureComponent<IProps, IState> {
timeoutId: number;
constructor(props: IProps) {
super(props);

this.onDragStart = this.onDragStart.bind(this);
this.state = {
displayHandle: false,
};
}

onDragStart(event) {
event.dataTransfer.setData(EDITOR_BLOCK_TYPE, this.props.block.getKey());
}

render() {
return (
<div
style={{
display: 'flex',
flexDirection: 'row',
gap: 24,
gap: 4,
}}
onMouseEnter={() => {
this.setState({
displayHandle: true,
});
}}
onMouseLeave={() => {
this.timeoutId = window.setTimeout(() => {
this.setState({
displayHandle: false,
});
}, 3000);
}}
>
<div
style={{
backgroundColor: 'red',
height: '100px',
width: '10px',
}}
className={this.state.displayHandle ? 'draggable-block-handle' : 'draggable-block-handle-hide'}
draggable={this.props.readOnly !== true}
onDragStart={this.onDragStart}
/>
onMouseOver={() => {
this.setState({
displayHandle: true,
}, () => {
window.clearTimeout(this.timeoutId);
});
}}
onMouseEnter={() => {
this.setState({
displayHandle: true,
}, () => {
window.clearTimeout(this.timeoutId);
});
}}
>
<DragHandle />
</div>
{this.props.children}
</div>
);
2 changes: 1 addition & 1 deletion scripts/core/editor3/html/to-html/AtomicBlockParser.ts
Original file line number Diff line number Diff line change
@@ -200,7 +200,7 @@ export class AtomicBlockParser {
}

const {cells} = data;
let html = '<div className="multi-line-quote">';
let html = '<div class="multi-line-quote">';
const cellContentState = cells[0]?.[0] != null
? convertFromRaw(cells[0][0])
: ContentState.createFromText('');
17 changes: 16 additions & 1 deletion scripts/core/editor3/styles.scss
Original file line number Diff line number Diff line change
@@ -242,7 +242,7 @@ $editor-styleButton-size: 3rem;
}

.multi-line-quote {
border-left: 5px solid #999;
border-left: 5px solid red;
font-style: italic;
}

@@ -950,6 +950,7 @@ $editor-styleButton-size: 3rem;
display: none;
}
}

.table-controls.Editor3-controls{
position: sticky;
top: 0;
@@ -959,3 +960,17 @@ $editor-styleButton-size: 3rem;
box-shadow: 0px 1px 5px #00000066;
background-color: #f8f8f8;
}


.draggable-block-handle-hide {
position: absolute;
left: -30px;
visibility: hidden;
}

.draggable-block-handle {
position: absolute;
left: -30px;
visibility: visible;
}

1 change: 1 addition & 0 deletions scripts/core/ui/components/SelectUser.tsx
Original file line number Diff line number Diff line change
@@ -65,6 +65,7 @@ export class SelectUser extends SuperdeskReactComponent<IPropsSelectUser, IState

return (
<SelectWithTemplate
label={gettext('Select a user')}
inlineLabel={true}
labelHidden={true}
getItems={(searchString) => {
6 changes: 6 additions & 0 deletions scripts/extensions/datetimeField/src/getDateTimeField.tsx
Original file line number Diff line number Diff line change
@@ -56,6 +56,9 @@ export function getDateTimeField(superdesk: ISuperdesk) {

<Spacer type="horizontal" align="stretch" spacing="medium">
<DatePickerISO
labelHidden
inlineLabel
label={gettext('Date')}
dateFormat={superdesk.instance.config.view.dateformat}
locale={datePickerLocale}
value={this.props.value} // must be full datetime here to avoid timezone conversion
@@ -86,6 +89,9 @@ export function getDateTimeField(superdesk: ISuperdesk) {

<div style={{display: 'flex', alignItems: 'center', height: '100%'}}>
<TimePicker
labelHidden
inlineLabel
label={gettext('Time')}
required // because it's a part of the date-time
value={hour}
onChange={(value) => {
Original file line number Diff line number Diff line change
@@ -12,7 +12,6 @@ import {
Autocomplete,
Button,
DatePicker,
FormLabel,
Input,
Option,
Select,
@@ -345,17 +344,17 @@ export class AssetFilterPanel extends React.PureComponent<IProps, IState> {
</FormGroup>
<FormGroup>
<FormItem>
<FormLabel text={gettext('Uploaded From:')} />
<DatePicker
label={gettext('Uploaded From:')}
value={this.state.localSearchParams.dateFrom ?? null}
onChange={this.onChange.dateFrom}
dateFormat={config.view.dateformat}
locale={this.datePickerLocale}
/>
</FormItem>
<FormItem>
<FormLabel text={gettext('Uploaded To:')} />
<DatePicker
label={gettext('Uploaded To:')}
value={this.state.localSearchParams.dateTo ?? null}
onChange={this.onChange.dateTo}
dateFormat={config.view.dateformat}
21 changes: 14 additions & 7 deletions styles/sass/archive-preview.scss
Original file line number Diff line number Diff line change
@@ -328,7 +328,7 @@
font-weight: 400;
p {
font-weight: 400;
margin-bottom: 0;
margin-bottom: 0;
}
}
}
@@ -340,6 +340,14 @@
padding: 4px 0 4px 14px;
font-style: italic;
}
.multi-line-quote {
font-size: 14px;
line-height: 140%;
margin: 16px 0;
border-left: 3px solid red;
padding: 4px 0 4px 14px;
font-style: italic;
}
.embed-block {
iframe {
width: 100%;
@@ -366,9 +374,9 @@
.metadata-view,
.article-versions {
position: absolute;
top:0;
left: 0;
right: 0;
top:0;
left: 0;
right: 0;
bottom: 0;
padding: 2.4rem 2.4rem $bottom-view-padding;
overflow: auto;
@@ -1134,7 +1142,7 @@ $lightbox-composite-condensed : 100px;
--toggleBorderColor: var(--sd-shadow-outline--2);
@include header-toggle;
}

.preview-header__timestamp {
padding: 8px 16px 2px 0;
display: flex;
@@ -1274,7 +1282,7 @@ $lightbox-composite-condensed : 100px;
font-weight: 600;
}
}

.tag-label {
max-width: 100%;
font-size: 11px;
@@ -1371,4 +1379,3 @@ figure.preview-overlay-on {
overflow: auto;
padding: 1px; // take border of the parent into account
}

0 comments on commit 36e6a58

Please sign in to comment.