Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Design a better way to trigger the full view mode in the authoring #4534

Merged
merged 10 commits into from
Jun 21, 2024
Merged

Design a better way to trigger the full view mode in the authoring #4534

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b26a2a8
add aditional button for full width mode
dzonidoo Jun 5, 2024
7123e0b
fix lint
dzonidoo Jun 12, 2024
cfdfbb5
Merge branch 'develop' into authoring-full-width-improvement
dzonidoo Jun 12, 2024
e7c73fe
Merge branch 'develop' into authoring-full-width-improvement
dzonidoo Jun 19, 2024
1071951
Merge branch 'develop' into authoring-full-width-improvement
dzonidoo Jun 19, 2024
077d10e
changes after review
dzonidoo Jun 19, 2024
7527cda
last changes
dzonidoo Jun 20, 2024
2cfc0a5
fix build
dzonidoo Jun 20, 2024
c2e6cb8
Merge branch 'develop' into authoring-full-width-improvement
dzonidoo Jun 20, 2024
d0ea6cf
fix lint
dzonidoo Jun 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 34 additions & 7 deletions scripts/apps/authoring-react/authoring-angular-integration.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import {IArticleActionInteractive} from 'core/interactive-article-actions-panel/
import {dispatchInternalEvent} from 'core/internal-events';
import {notify} from 'core/notify/notify';
import {showModal} from '@superdesk/common';
import {ToggleFullWidth} from 'apps/authoring/authoring/components/toggleFullWithEditor';

function onClose() {
ng.get('authoringWorkspace').close();
Expand All @@ -43,6 +44,8 @@ function onClose() {
function getInlineToolbarActions(
options: IExposedFromAuthoring<IArticle>,
action?: IAuthoringActionType,
hideMonitoring?: (state: boolean, event: React.MouseEvent<HTMLButtonElement>) => void,
isExpanded?: boolean,
): IAuthoringOptions<IArticle> {
const {
item,
Expand Down Expand Up @@ -137,6 +140,18 @@ function getInlineToolbarActions(
availableOffline: true,
};

const toggleFullWidthButton: ITopBarWidget<IArticle> = {
group: 'start',
priority: 0.1,
component: () => (
<ToggleFullWidth
onClick={(event) => hideMonitoring(true, event)}
isExpanded={isExpanded}
/>
),
availableOffline: true,
};

const getManageHighlights = (): ITopBarWidget<IArticle> => ({
group: 'start',
priority: 0.3,
Expand Down Expand Up @@ -388,22 +403,22 @@ function getInlineToolbarActions(
if (action === 'kill') {
return {
readOnly: false,
actions: [sendKillAction, closeIconButton, minimizeButton],
actions: [toggleFullWidthButton, sendKillAction, closeIconButton, minimizeButton],
};
}

if (action === 'correct') {
return {
readOnly: false,
actions: [sendCorrectionAction, cancelAuthoringAction, minimizeButton],
actions: [toggleFullWidthButton, sendCorrectionAction, cancelAuthoringAction, minimizeButton],
};
}

switch (itemState) {
case ITEM_STATE.DRAFT:
return {
readOnly: false,
actions: [saveButton, minimizeButton, ...getReadOnlyAndArchivedFrom()],
actions: [toggleFullWidthButton, saveButton, minimizeButton, ...getReadOnlyAndArchivedFrom()],
};

case ITEM_STATE.SUBMITTED:
Expand All @@ -413,6 +428,7 @@ function getInlineToolbarActions(
case ITEM_STATE.UNPUBLISHED:
// eslint-disable-next-line no-case-declarations
const actions: Array<ITopBarWidget<IArticle>> = [
toggleFullWidthButton,
minimizeButton,
closeButton,
...getReadOnlyAndArchivedFrom(),
Expand Down Expand Up @@ -634,6 +650,7 @@ function getInlineToolbarActions(
),
availableOffline: false,
},
toggleFullWidthButton,
closeIconButton,
],
};
Expand All @@ -657,6 +674,7 @@ function getInlineToolbarActions(
),
availableOffline: false,
},
toggleFullWidthButton,
closeIconButton,
],
};
Expand All @@ -666,6 +684,7 @@ function getInlineToolbarActions(
return {
readOnly: true,
actions: [
toggleFullWidthButton,
updateAction,
correctAction,
takedownAction,
Expand All @@ -678,13 +697,14 @@ function getInlineToolbarActions(
case ITEM_STATE.BEING_CORRECTED:
return {
readOnly: false,
actions: [closeIconButton, saveButton],
actions: [toggleFullWidthButton, closeIconButton, saveButton],
};

case ITEM_STATE.CORRECTION:
return {
readOnly: false,
actions: [
toggleFullWidthButton,
saveButton,
{
group: 'end',
Expand All @@ -710,13 +730,13 @@ function getInlineToolbarActions(
case ITEM_STATE.KILLED:
return {
readOnly: true,
actions: [closeIconButton],
actions: [toggleFullWidthButton, closeIconButton],
};

case ITEM_STATE.RECALLED:
return {
readOnly: true,
actions: [closeIconButton],
actions: [toggleFullWidthButton, closeIconButton],
};
default:
assertNever(itemState);
Expand Down Expand Up @@ -795,6 +815,8 @@ export function getAuthoringPrimaryToolbarWidgets(
export interface IProps {
action?: IAuthoringActionType;
itemId: IArticle['_id'];
hideMonitoring: () => void;
isExpanded: boolean;
}

export class AuthoringAngularIntegration extends React.PureComponent<IProps> {
Expand All @@ -806,7 +828,12 @@ export class AuthoringAngularIntegration extends React.PureComponent<IProps> {
getAuthoringPrimaryToolbarWidgets={getAuthoringPrimaryToolbarWidgets}
itemId={this.props.itemId}
onClose={onClose}
getInlineToolbarActions={(exposed) => getInlineToolbarActions(exposed, this.props.action)}
getInlineToolbarActions={(exposed) => getInlineToolbarActions(
exposed,
this.props.action,
this.props.hideMonitoring,
this.props.isExpanded,
)}
authoringStorage={(() => {
if (this.props.action === 'kill' || this.props.action === 'takedown') {
return getAuthoringStorageIArticleKillOrTakedown(this.props.action);
Expand Down
1 change: 0 additions & 1 deletion scripts/apps/authoring-react/authoring-react.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@
justify-content: space-between;
gap: 16px;
align-items: center;
padding-left: 16px;
tomaskikutis marked this conversation as resolved.
Show resolved Hide resolved

> * {
display: flex;
Expand Down
32 changes: 32 additions & 0 deletions scripts/apps/authoring/authoring/components/toggleFullWithEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React from 'react';
import {Icon} from 'superdesk-ui-framework/react/components/Icon';
import {Tooltip} from 'superdesk-ui-framework/react/components/Tooltip';
import classNames from 'classnames';

interface IProps {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

props should be:

interface IProps {
    fullWidth: boolean;
    setFullWidth(): void;
}

isExpanded: boolean;
onClick(event): void;
}

export class ToggleFullWidth extends React.Component<IProps> {
render() {
const classes = classNames('expand-button', {
'expand-button--expanded': this.props.isExpanded,
});

return (
<Tooltip
text={this.props.isExpanded ? 'Revert Authoring' : 'Expand Authoring'}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use "full width mode" and "leave full width mode"; translate strings

flow="right"
appendToBody={true}
>
<button
className={classes}
onClick={this.props.onClick}
>
<Icon name="chevron-left-thin" />
</button>
</Tooltip>
);
}
}
33 changes: 30 additions & 3 deletions scripts/apps/authoring/authoring/directives/AuthoringEmbeddedDirective.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,19 @@ import * as helpers from 'apps/authoring/authoring/helpers';
import {gettext} from 'core/utils';
import {appConfig, authoringReactViewEnabled} from 'appConfig';
import {canPrintPreview} from 'apps/search/helpers';
import {IFullWidthPageCapabilityConfiguration} from 'superdesk-api';

AuthoringEmbeddedDirective.$inject = ['api', 'notify', '$filter'];
export function AuthoringEmbeddedDirective(api, notify, $filter) {
AuthoringEmbeddedDirective.$inject = ['superdeskFlags', 'api', 'notify', '$filter'];
export function AuthoringEmbeddedDirective(superdeskFlags, api, notify, $filter) {
return {
template: authoringReactViewEnabled
? (
'<div>' +
'<sd-authoring-integration-wrapper data-action="action" data-item-id="item._id">' +
'<sd-authoring-integration-wrapper ' +
'data-action="action" ' +
'data-item-id="item._id" ' +
'data-hide-monitoring="hideMonitoring" ' +
'data-is-expanded="isExpanded">' +
'</sd-authoring-react>' +
'</div>'
)
Expand All @@ -22,6 +27,28 @@ export function AuthoringEmbeddedDirective(api, notify, $filter) {
},
link: function(scope) {
scope.canPrintPreview = canPrintPreview;
scope.isExpanded = superdeskFlags.flags.hideMonitoring;

scope.hideMonitoring = function(state, e) {
const fullWidthConfig: IFullWidthPageCapabilityConfiguration
= scope.$parent.$parent.$parent.fullWidthConfig;

if (fullWidthConfig.enabled) {
if (fullWidthConfig.allowed) {
fullWidthConfig.onToggle(!scope.fullWidthEnabled);
}
} else {
// eslint-disable-next-line no-lonely-if
if (superdeskFlags.flags.authoring && state) {
e.preventDefault();
superdeskFlags.flags.hideMonitoring = !superdeskFlags.flags.hideMonitoring;
scope.isExpanded = superdeskFlags.flags.hideMonitoring;
scope.$applyAsync();
} else {
superdeskFlags.flags.hideMonitoring = false;
}
}
};

function overrideEdnote(template) {
/* Override Editor note with given template or default one
Expand Down
32 changes: 30 additions & 2 deletions scripts/apps/authoring/authoring/directives/AuthoringTopbarDirective.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {addInternalEventListener, dispatchInternalEvent} from 'core/internal-eve
import {appConfig} from 'appConfig';
import {ITEM_STATE} from 'apps/archive/constants';
import {IArticleActionInteractive} from 'core/interactive-article-actions-panel/interfaces';
import {IFullWidthPageCapabilityConfiguration} from 'superdesk-api';
import {sdApi} from 'api';

/**
Expand All @@ -17,12 +18,13 @@ import {sdApi} from 'api';
*
* @description Generates authoring subnav bar
*/
AuthoringTopbarDirective.$inject = ['TranslationService', 'privileges', 'authoringWorkspace', '$q'];
AuthoringTopbarDirective.$inject = ['TranslationService', 'privileges', 'authoringWorkspace', '$q', 'superdeskFlags'];
export function AuthoringTopbarDirective(
TranslationService,
privileges,
authoringWorkspace: AuthoringWorkspaceService,
$q,
superdeskFlags,
) {
return {
templateUrl: 'scripts/apps/authoring/views/authoring-topbar.html',
Expand All @@ -33,7 +35,7 @@ export function AuthoringTopbarDirective(

scope.additionalButtons = authoringWorkspace.authoringTopBarAdditionalButtons;
scope.buttonsToHide = authoringWorkspace.authoringTopBarButtonsToHide;

scope.monitoringHidden = superdeskFlags.flags.hideMonitoring ?? false;
scope.saveTopbarLoading = false;
scope.getSpellchecker = getSpellchecker;
scope.userHasPrivileges = privileges.userHasPrivileges;
Expand Down Expand Up @@ -150,6 +152,32 @@ export function AuthoringTopbarDirective(
scope.$on('$destroy', () => {
removeSaveEventListener();
});

scope.$watch(() => {
return superdeskFlags.flags.hideMonitoring;
}, (value) => {
scope.monitoringHidden = value;
});

scope.hideMonitoring = function(state, e) {
const fullWidthConfig: IFullWidthPageCapabilityConfiguration
= scope.$parent.$parent.$parent.$parent.fullWidthConfig;

if (fullWidthConfig.enabled) {
if (fullWidthConfig.allowed) {
fullWidthConfig.onToggle(!scope.fullWidthEnabled);
}
} else {
// eslint-disable-next-line no-lonely-if
if (superdeskFlags.flags.authoring && state) {
e.preventDefault();
superdeskFlags.flags.hideMonitoring = !superdeskFlags.flags.hideMonitoring;
} else {
superdeskFlags.flags.hideMonitoring = false;
scope.superdeskFlags = false;
}
}
};
},
};
}
5 changes: 4 additions & 1 deletion scripts/apps/authoring/authoring/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,10 @@ angular.module('superdesk.apps.authoring', [
.directive('html5vfix', directive.Html5vfix)
.directive('sdDashboardCard', directive.DashboardCard)
.component('sdCharacterCount', reactToAngular1(CharacterCount, ['item', 'html', 'limit'], [], 'display: inline'))
.component('sdAuthoringIntegrationWrapper', reactToAngular1(AuthoringAngularIntegration, ['itemId', 'action'], []))
.component('sdAuthoringIntegrationWrapper', reactToAngular1(
AuthoringAngularIntegration, ['itemId', 'action', 'hideMonitoring', 'isExpanded'],
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Update terminology accross files so it's the following:
fullWidth / setFullWidth - for both authoring components
monitoringHidden / setMonitoringHidden - for monitoring

The reason for different names is to reduce coupling and limit information authoring receives about implementation details of the rest of the system.

[],
))
.component(
'sdInteractiveArticleActionsPanelCombined',
reactToAngular1(InteractiveArticleActionsPanelCombined, [
Expand Down
2 changes: 1 addition & 1 deletion scripts/apps/authoring/views/authoring-topbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
sd-media-query min-width="880"
data-test-id="authoring-topbar"
>

<toggle-full-width ng-click="hideMonitoring(currentRoute.href === item.href, $event)" ng-href="#{{ :: item.href }}" is-expanded="monitoringHidden"></toggle-full-width>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are arguments to hideMonitoring doing anything? When I logged them, it always appears empty

<sd-authoring-topbar-react
article="item"
action="action"
Expand Down
5 changes: 5 additions & 0 deletions scripts/core/directives/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {PhoneHomeModalDirective} from './PhoneHomeModalDirective';
import {reactToAngular1} from 'superdesk-ui-framework';
import {UserAvatar} from 'apps/users/components/UserAvatar';
import {UserOrganisationAvatar} from 'apps/users/components/OrganisationAvatar';
import {ToggleFullWidth} from 'apps/authoring/authoring/components/toggleFullWithEditor';

/**
* @ngdoc module
Expand Down Expand Up @@ -62,4 +63,8 @@ export default angular
.component(
'sdOrganisationAvatar',
reactToAngular1(UserOrganisationAvatar, ['size']),
)
.component(
'toggleFullWidth',
reactToAngular1(ToggleFullWidth, ['isExpanded', 'onClick']),
);
Loading