superdesk/superdesk-client-core

View on GitHub
scripts/apps/authoring/views/authoring-topbar.html

Summary

Maintainability
Test Coverage
<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>