scripts/apps/authoring/views/authoring-topbar.html
<div
id="subnav"
class="subnav subnav--authoring"
ng-class="{'auth-sendto': views.send, 'subnav--locked': isLocked()}"
sd-media-query min-width="880"
data-test-id="authoring-topbar"
>
<sd-authoring-topbar-react
article="item"
action="action"
on-change="handleArticleChange"
></sd-authoring-topbar-react>
<div ng-if="isLocked()" class="locked-info">
<div class="locked-info__avatar">
<sd-user-avatar data-user="item.lock_user"></sd-user-avatar>
</div>
<span class="locked-info__label" translate>Locked by</span>
<span class="locked-info__name">{{ item.lock_user | username }}</span>
<button
class="locked-info__button"
ng-show="can_unlock()"
ng-click="unlock()"
ng-disabled="unlockClicked"
sd-hotkey="ctrl+shift+u"
sd-hotkey-options="{global: true}"
translate>
Unlock
</button>
</div>
<div class="subnav__authoring-topbar" ng-class="{'enable-overflow': item.highlights || item._type === 'archived'}">
<span ng-if="item._type === 'archived'" class="stage" ng-style="{'overflow': 'visible'}" tooltip="{{:: 'Archived from' | translate}} {{deskName}} / {{ stage.name}}" tooltip-placement="bottom" ng-show="stage"><b>{{:: 'Archived from' | translate}} {{deskName}}</b> / {{ stage.name }}</span>
<span ng-if="item._type !== 'archived'" class="stage" tooltip="{{deskName}} / {{ stage.name }}" tooltip-placement="bottom" ng-show="stage" ng-if="item._type !== 'legal_archive'"><b>{{deskName}}</b> / {{ stage.name }}</span>
<span class="stage" tooltip="{{deskName}} / {{ stage }}" tooltip-placement="bottom" ng-show="stage" ng-if="item._type === 'legal_archive'"><b>{{deskName}}</b> / {{ stage }}</span>
<span sd-marked-item-title data-item="item" data-field="highlights"></span>
<span sd-marked-item-title data-item="item" data-field="marked_desks"></span>
<span sd-assignment-icon data-item="item"/>
<span class="label label--warning" ng-show="item._type !== 'archived' && stage.local_readonly"
translate>Read-only</span>
</div>
<div class="subnav__stretch-bar sd-overflow-ellipsis" ng-if="showCustomButtons()" style="min-width: 150px;">
<div
class="subnav__button-stack subnav__button-stack--custom-buttons sd-overflow-ellipsis"
ng-if="$root.config.features.customAuthoringTopbar != null && ($root.config.features.customAuthoringTopbar.toDesk === true || $root.config.features.customAuthoringTopbar.publish === true || $root.config.features.customAuthoringTopbar.publishAndContinue == true)"
ng-show="_editable && itemActions.save && (action === 'edit' || isCorrection(item))"
>
<button
ng-if="toDeskEnabled"
class="btn sd-overflow-ellipsis btn--custom"
ng-click="saveAndContinue(sendToNextStage, false)"
aria-label="{{ 'To Desk' | translate }}"
title="{{ :: 'To Desk' | translate }}">
<span class="btn__text sd-overflow-ellipsis" translate>To Desk</span>
<span class="btn__text--short" translate>T D</span>
</button>
<button
ng-if="closeAndContinueEnabled"
class="btn sd-overflow-ellipsis btn--custom"
ng-click="saveAndContinue(closeAndContinue, false)"
aria-label="{{ 'Close and Continue' | translate }}"
title="{{ 'Close and Continue' | translate }}">
<span class="btn__text sd-overflow-ellipsis" translate>Close & Continue</span>
<span class="btn__text--short" translate>C & C</span>
</button>
<button
ng-if="publishEnabled"
class="btn btn--custom btn--publish"
type="submit"
ng-click="saveAndContinue(publish, true)"
aria-label="{{ :: 'Publish' | translate }}"
title="{{ :: 'Publish' | translate }}">
<span class="btn__text sd-overflow-ellipsis" translate>Publish</span>
<span class="btn__text--short" translate>P</span>
</button>
<button
ng-if="publishAndContinueEnabled"
class="btn sd-overflow-ellipsis btn--custom btn--publish-plus"
ng-click="saveAndContinue(publishAndContinue, true)"
aria-label="{{ :: 'Publish and Continue' | translate }}"
title="{{ :: 'Publish and Continue' | translate }}">
<span class="btn__text sd-overflow-ellipsis">{{ :: 'Publish & Continue' | translate }}</span>
<span class="btn__text--short">{{ :: 'P & C' | translate }}</span>
</button>
</div>
</div>
<div class="subnav__button-stack subnav__button-stack--default">
<button id="Edit" class="btn btn--medium btn--primary" ng-if="item._type !== 'legal_archive'"
ng-show="action === 'view' && !item._editable && itemActions.edit"
ng-click="edit()"
translate>Edit</button>
<button class="btn btn--primary"
ng-show="(action === 'view' || !item._editable) && itemActions.deschedule"
ng-click="deschedule()"
translate>Deschedule</button>
<button class="btn btn--primary" ng-if="item._type !== 'legal_archive' && !isLocked() && userHasPrivileges({rewrite: 1}) === true"
ng-show="(action === 'view' || !item._editable) && itemActions.re_write"
ng-click="openAction('rewrite')"
aria-label="{{ 'Update' | translate }}"
title="{{ 'Update' | translate }}">
<span class="btn__text" translate>Update</span>
<span class="btn__text--short" translate>U</span>
</button>
<button class="btn btn--primary" ng-if="item._type !== 'legal_archive' && userHasPrivileges({correct: 1}) === true"
ng-show="(action === 'view' || !item._editable) && itemActions.correct"
ng-click="openAction('correct')"
ng-disabled="isCorrectionInProgress"
aria-label="{{ 'Correct' | translate }}"
title="{{ 'Correct' | translate }}">
<span class="btn__text" translate>Correct</span>
<span class="btn__text--short" translate>C</span>
</button>
<button class="btn btn--primary" ng-if="item._type !== 'legal_archive' && userHasPrivileges({takedown: 1}) === true"
ng-show="(action === 'view' || !item._editable) && itemActions.takedown"
ng-click="openAction('takedown')"
aria-label="{{ 'Takedown' | translate }}"
title="{{ 'Takedown' | translate }}">
<span class="btn__text" translate>Takedown</span>
<span class="btn__text--short" translate>T</span>
</button>
<button class="btn btn--primary" ng-if="item._type !== 'legal_archive' && userHasPrivileges({unpublish: 1}) === true"
ng-show="(action === 'view' || !item._editable) && itemActions.unpublish"
ng-click="openAction('unpublish')"
aria-label="{{ 'Unpublish' | translate }}"
title="{{ 'Unpublish' | translate }}">
<span class="btn__text" translate>Unpublish</span>
<span class="btn__text--short" translate>UP</span>
</button>
<button class="btn btn--primary" ng-if="item._type !== 'legal_archive' && userHasPrivileges({kill: 1}) === true"
ng-show="(action === 'view' || !item._editable) && itemActions.kill"
ng-click="openAction('kill')"
aria-label="{{ 'Kill' | translate }}"
title="{{ 'Kill' | translate }}">
<span class="btn__text" translate>Kill</span>
<span class="btn__text--short" translate>K</span>
</button>
<button class="btn btn--hollow"
id="closeAuthoringBtn"
ng-click="close()"
ng-if="(action !== 'correct' || isCorrection(item)) && action !== 'kill'"
aria-label="{{ :: 'Close' | translate }}"
title="{{ :: 'Close' | translate }}"
sd-hotkey="ctrl+shift+e"
sd-hotkey-options="{global: true}"
data-test-id="close">
<span class="btn__text" translate>Close</span class="btn__text">
<i class="icon-close-small btn__text--short sd-margin--0"></i>
</button>
<button class="btn btn--primary" type="submit"
ng-click="saveTopbar()"
ng-show="_editable"
ng-if = "itemActions.save && (action === 'edit' || isCorrection(item))"
ng-disabled="!save_enabled() || saveTopbarLoading"
sd-hotkey="ctrl+shift+s"
sd-hotkey-options="{global: true}"
translate
data-test-id="save"
>
<sd-spinner ng-if="saveTopbarLoading" data-test-id="loading-indicator" data-size="'mini'"></sd-spinner>
<span translate>Save</span>
</button>
<button class="btn btn--primary" type="submit"
ng-click="previewFormattedItem()"
ng-show="_editable"
ng-if = "itemActions.save && previewFormattedEnabled() && action === 'edit'"
ng-disabled="save_enabled() && !saveTopbarLoading"
sd-hotkey="ctrl+shift+l"
sd-hotkey-options="{global: true}"
translate>Preview</button>
<div sd-preview-formatted ng-if="previewFormatted"></div>
<button id="export" class="btn btn--primary"
ng-click="exportHighlight(item)"
ng-disabled="!_editable"
ng-if="showExportButton"
translate>Export</button>
<button class="btn btn--primary" type="submit"
id="send-correction-btn"
ng-if="action === 'correct' && !isCorrection(item)"
ng-show="_editable"
ng-click="publish()"
translate>Send Correction</button>
<button class="btn btn--primary" type="submit"
id="send-kill-btn"
ng-if="action === 'kill'"
ng-show="_editable"
ng-click="publish()"
translate>Send Kill</button>
<button class="btn btn--primary" type="submit"
id="send-takedown-btn"
ng-if="action === 'takedown'"
ng-show="_editable"
ng-click="publish()"
translate>Send Takedown</button>
<button class="btn"
id="cancelAuthoringBtn"
ng-if="action === 'correct' && !isCorrection(item) || action === 'kill'"
ng-click="close()"
translate>Cancel</button>
<button ng-repeat="(_, btn) in additionalButtons" ng-class="btn.class" ng-click="btn.onClick(item)">{{btn.label}}</button>
</div>
<div class="subnav__button-stack subnav__button-stack--square-buttons">
<button class="navbtn strict"
ng-if="!isLocked() && _editable && buttonsToHide['article-edit--topbar--minimize'] !== true"
aria-label="{{ :: 'Minimize' | translate }}"
title="{{ :: 'Minimize' | translate }}"
ng-click="minimize()">
<i class="big-icon--minimize"></i>
</button>
<div id="authoring-extra-dropdown"
ng-if="item._type !== 'legal_archive' && item._type !== 'archived' && !highlight && item.state !== 'spiked' && buttonsToHide['article-edit--topbar--actions'] !== true"
class="dropdown pull-left strict" dropdown>
<button
id="more-actions"
class="navbtn dropdown__toggle"
aria-label="{{ :: 'More actions' | translate }}"
title="{{ :: 'More actions' | translate }}"
dropdown__toggle
data-test-id="actions-button"
>
<i class="icon-dots-vertical"></i>
</button>
<div class="dropdown__menu pull-right" data-test-id="actions-list">
<ul ng-controller="TemplateMenu as templateMenu">
<li>
<button type="button"
ng-click="templateMenu.create(item)"
translate>Save as template</button>
</li>
</ul>
<ul ng-if="!hideLiveSuggestions()">
<li>
<button type="button" ng-click="openSuggestions()" class="live-suggest-menu-item" translate>
Live suggestions
</button>
</li>
</ul>
<ul id="compare-versions" ng-if="item.task.desk">
<li>
<button type="button"
ng-click="openCompareVersions(item)"
translate>Compare versions</button>
</li>
</ul>
<ul id="multiedit" ng-if="item.task.desk && itemActions.multi_edit && !isLocked()" ng-show="action !== 'kill'">
<li>
<div class="dropdown multiedit-toggle" dropdown>
<button class="dropdown__toggle" dropdown__toggle>
{{ :: 'Multiedit' | translate }}
</button>
<ul class="dropdown__menu dropdown__menu--submenu-left" sd-multiedit-dropdown></ul>
</div>
</li>
</ul>
<ul ng-if='canExport()'>
<li>
<button type="button"
ng-click="openExport()"
>{{ :: 'Export' | translate }}
<i class="icon-download-right-thin dropdown__submenu-icon"></i>
<div sd-export ng-if="export"></div>
</button>
</li>
</ul>
<ul ng-if="articleActionsFromExtensions">
<li ng-repeat="action in articleActionsFromExtensions" ng-if="action.groupId !== 'highlights'">
<button ng-click="triggerActionFromExtension(action)">{{action.label}}</button>
</li>
</ul>
<ul ng-if="itemActionsHighlightsSectionDisplayed()">
<li class="dropdown__menu-divider"></li>
<li ng-if="itemActions.mark_item_for_highlight">
<div class="dropdown highlights-toggle" dropdown>
<button class="dropdown__toggle" dropdown__toggle translate>Highlights</button>
<ul class="dropdown__menu dropdown__menu--submenu-left" sd-mark-highlights-dropdown></ul>
</div>
</li>
<li ng-if="itemActions.mark_item_for_desks">
<div class="dropdown marks-toggle" dropdown>
<button class="dropdown__toggle" dropdown__toggle translate>Marked for desks</button>
<ul class="dropdown__menu dropdown__menu--submenu-left" sd-mark-desks-dropdown></ul>
</div>
</li>
<li ng-repeat="action in articleActionsFromExtensions">
<button ng-if="action.groupId === 'highlights'" ng-click="triggerActionFromExtension(action)">{{action.label}}</button>
</li>
</ul>
<span sd-item-action-by-intent sd-intent-action="external-app"></span>
<ul ng-if="isTranslationAvailable()">
<li class="dropdown__menu-divider"></li>
<li><span class="dropdown__menu-label" translate>Translations</span></li>
<li>
<div class="dropdown highlights-toggle" dropdown>
<button class="dropdown__toggle" dropdown__toggle>
{{ :: 'Translate item to' | translate }}
</button>
<ul class="dropdown__menu dropdown__menu--submenu-left" sd-translation-dropdown></ul>
</div>
</li>
</ul>
<ul ng-if="_editable" ng-controller="SpellcheckMenu as spellcheckMenu">
<li class="dropdown__menu-divider"></li>
<li><span class="dropdown__menu-label" translate>Spell Checker</span></li>
<li ng-if="!useTansaProofing()" class="dropdown__menu-item--no-link">
<span class="pull-right"
sd-switch
ng-model="spellcheckMenu.isAuto"
ng-change="spellcheckMenu.pushSettings()"
ng-hide="getSpellchecker(item.language) == null"
tooltip="{{ spellcheckMenu.isAuto ? 'Spell checking ON' : 'Spell checking OFF' | translate }}"
tooltip-placement="left"></span>
<span translate>Run automatically</span>
</li>
<li ng-if="!useTansaProofing()">
<button type="button"
ng-click="spellcheckMenu.runSpellchecker()"
ng-disabled="spellcheckMenu.isAuto"
sd-hotkey="ctrl+shift+y"
sd-hotkey-options="{global: true}">
<span class="shortcut pull-right">Ctrl+Shift+Y</span>
<span translate>Check spelling</span>
</button>
</li>
<li ng-if="useTansaProofing()">
<button type="button"
ng-click="runTansa()"
sd-hotkey="ctrl+shift+y"
sd-hotkey-options="{global: true}">
<span class="shortcut pull-right">Ctrl+Shift+Y</span>
<span translate>Check spelling</span>
</button>
</li>
</ul>
<span sd-extension-point="authoring-topbar"></span>
</div>
</div>
<button id="send-to-btn" ng-show="_editable"
ng-if="(action !== 'correct' && action !== 'kill' && buttonsToHide['article-edit--topbar--sendto-publish'] !== true)
|| isCorrection(item)"
class="navbtn navbtn--highlighted"
aria-label="{{ :: 'Send to / Publish' | translate }}"
sd-tooltip="{{ :: 'Send to / Publish' | translate }}"
flow="left"
ng-click="openPublishOrSendToPane()"
ng-class="{'active': views.send}"
data-test-id="open-send-publish-pane"
>
<i class="big-icon--send-to big-icon--white"></i>
</button>
</div>
</div>