superdesk/superdesk-client-core

View on GitHub
scripts/apps/search/views/multi-image-edit.html

Summary

Maintainability
Test Coverage
<div ng-if="isUpload !== true" class="modal__header modal__header--flex" data-theme="dark-ui">
    <h3 class="modal__heading modal__heading--grow" translate>Edit metadata</h3>

    <div class="modal__header-buttons modal__header-buttons--right">
        <button class="btn btn--hollow" ng-click="close()" translate>Close</button>
        <button class="btn btn--hollow" ng-click="save()" ng-disabled="!isDirty()" translate>Save</button>
        <button class="btn btn--hollow" ng-click="save(true)" ng-disabled="!isDirty()" translate>Save & Close</button>
    </div>
</div>

<div ng-if="isUpload === true" class="modal__header modal__header--flex" data-theme="dark-ui">
    <h3 class="modal__heading modal__heading--grow" translate>Upload media</h3>

    <div class="modal__header-buttons modal__header-buttons--right">
        <button class="btn btn--hollow" ng-click="close()" ng-disabled="uploadInProgress" translate>Cancel</button>
        <div ng-transclude="select-desk"></div>
        <button class="btn btn--primary btn--hollow" ng-click="save(true)" ng-disabled="!images.length" translate data-test-id="multi-image-edit--start-upload">Upload</button>
    </div>
</div>

<div class="modal__body modal__body--no-padding" data-theme="dark-ui">
    <div class="sd-column-box--2">
        <div class="sd-column-box__main-column sd-column-box__main-column--photo-preview">
            <div class="sd-column-box__main-column-top-bar" ng-if="images.length > 0">
                <button
                    ng-click="selectAll()"
                    ng-disabled="areAllSelected()"
                    class="btn btn--hollow btn--primary"
                    translate
                >
                    Select All
                </button>
                <button
                    ng-click="unselectAll()"
                    ng-disabled="!areSomeSelected()"
                    class="btn btn--hollow btn--primary"
                    translate
                >
                    Deselect All
                </button>
            </div>

            <div class="sd-photo-preview sd-photo-preview--grid-only">
                <div class="sd-photo-preview__thumb-strip">
                    <div class="sd-grid-list">
                        <div class="sd-grid-item sd-grid-item--with-click"
                             ng-click="handleItemClick($event, image)"
                             ng-repeat="image in images track by image._id"
                             ng-class="{'sd-grid-item--selected' : image.selected}"
                             style="z-index: 1;"><!--  // required so it's visible on top or drag-and-drop layer -->
                            <div class="sd-grid-item__thumb">
                                <div ng-bind-html="trustAsHtml(getThumbnailHtml(image))"
                                    style="display: flex; align-items: center; justify-content: center;">
                                </div>

                                <a ng-if="onRemoveItem" class="icn-btn sd-grid-item__remove" sd-tooltip="{{'Remove item' | translate}}" flow="left">
                                    <i class="icon-close-small"></i>
                                </a>

                                <span ng-if="getProgress && getProgress(image) > 0" class="sd-grid-item__progress-circle">
                                    <sd-circular-progress value="getProgress(image)" class="sd-circular-progress--m"></sd-circular-progress>
                                </span>
                            </div>
                            <div class="sd-grid-item__content">
                                <time sd-absdate datetime="image.versioncreated"></time>
                                <p class="sd-grid-item__title">{{image.headline}}</p>
                                <p class="sd-grid-item--element-grow sd-grid-item__text-light">{{image.description_text}}</p>
                                <div class="sd-grid-item__content-block">
                                    <span class="sd-grid-item__text-label" translate>Copyright:</span>
                                    <span class="sd-grid-item__text-strong">{{image.copyrightnotice}}</span>
                                </div>
                            </div>
                            <div class="sd-grid-item__footer">
                                <div class="sd-grid-item__footer-block sd-grid-item__footer-block--multi-l">
                                    <i class="sd-grid-item__type-icn sd-grid-item__footer-block-item" ng-class="getIconForItemType(image)"></i>
                                </div>
                            </div>
                        </div>
                        <div ng-transclude="additional-content"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="sd-column-box__slide-in-column sd-column-box__slide-in-column--large">
            <div class="sd-column-box__slide-in-column-inner sd-slide-in-panel" ng-controller="MediaFieldsController as fields">
                <div class="sd-slide-in-panel__header">
                    <h3 class="sd-slide-in-panel__heading" translate>Metadata</h3>
                </div>
                <div class="sd-slide-in-panel__content">
                    <div class="sd-slide-in-panel__content-block sd-slide-in-panel__content-block--first">
                        <div class="sd-alert sd-alert--hollow sd-alert--primary sd-alert--small" style="margin: -1rem 0 3rem;">
                            <span translate>Currently editing: {{getSelectedItemsLength()}} items</span>
                        </div>
                        <div sd-media-metadata-editor
                            data-item="metadata"
                            data-validator="validator"
                            data-disabled="getSelectedItemsLength() === 0"
                            data-dark="true"
                            data-boxed="true"
                            data-on-change="onChange(key)"
                            data-placeholder="placeholder"
                            data-multi="getSelectedImages().length > 1"
                            data-fields="fields.fields"
                        ></div>
                    </div>
                </div>
                <div sd-media-copy-metadata
                    ng-if="getSelectedImages().length"
                    class="sd-slide-in-panel__footer"
                    data-metadata="metadata"
                    data-validator="validator"
                    data-on-change="setMetadataDirty(!metadataDirty)"
                    data-fields="fields.fields"
                    >
                </div>
            </div>
        </div>
    </div>
</div>