superdesk/superdesk-client-core

<div class="modal__header modal__header--flex">
    <h3 class="modal__heading">{{ activity.label|translate }}</h3>
    <button type="button" class="icn-btn" ng-click="reject()"><i class="icon-close-small"></i></button>    
</div>

<div class="modal__body split-popup no-padding">
    <aside class="sidebar">
        <ul class="split-popup__nav">
            <li class="split-popup__nav-item" ng-repeat="method in methods" ng-click="activate(method)" ng-class="{active: active === method}">
                <i class="icon-{{ method.id }}"></i> {{ method.label | translate }}
            </li>
        </ul>
        <div class="split-popup__nav-item remove-avatar" ng-click="removeImage()" ng-show="locals.data.picture_url">
            <span class="remove-avatar__inner">
                <i class="icon-trash"></i><span class="ng-scope" translate>No image</span>
            </span>
            <small translate>Shows your initials instead</small>
        </div>
    </aside>

    <section class="main" sd-image-preview="preview.url" data-file="preview.img" data-progress-width="progress.width">

        <div class="upload-progress" ng-show="progress.width">
            <div class="bar" style="width: {{ progress.width }}%;"></div>
        </div>

        <div class="computer" ng-if="active.id == 'upload' && !preview.url" ng-hide="progress.width">
            <div class="dropzone" ngf-drop="preview.img = $files[0]">
                <div class="text" translate>Drop it here</div>
                <div class="input-holder">
                    <input type="file" accept="image/*;capture=camera" ngf-select="preview.img = $files[0]" label="{{ 'or Select from computer' | translate }}">
                </div>
                <div class="info" translate>The minimum image resolution is 200x200 pixels.</div>
            </div>
        </div>

        {# <div class="camera" ng-if="active.id == 'photo' && !preview.url">
            <label translate>Click to capture using camera. Be sure that you allow camera accessibility.</label>
            <video autoplay sd-video-capture="preview.url" data-file="preview.img"></video>
        </div> #}

        <div class="web" ng-if="active.id == 'globe' && (!preview.cords || progress.width)">
            <div class="sd-input">
                <label class="sd-input__label" for="last-name" translate>Enter web url</label>
                <input class="sd-input__input" type="url" ng-model="url" ng-change="preview.url = url">
                <div class="sd-input__message-box">
                    <div class="sd-input__message" ng-if="url" translate>Provided image URL is not valid.</div>
                </div>
            </div>
        </div>

        <div class="preview" ng-if="preview.url" ng-hide="!preview.cords || progress.width">
            <label translate>Make sure you're looking the best</label>
            <div class="crop-area">
                <div class="original">
                    <div sd-crop
                        data-src="preview.url"
                        data-cords="preview.cords"
                        data-progress-width="progress.width"
                        data-file="preview.img"
                        data-max-file-size="2">
                    </div>
                </div>
                <div class="preview">
                    <div class="preview-large">
                        <img ng-src="{{preview.url}}" class="preview-target-1">
                    </div>
                    <div class="preview-round">
                        <img ng-src="{{preview.url}}" class="preview-target-2">
                    </div>
                </div>
            </div>
        </div>

    </section>
</div>

<div class="modal__footer">
    <button type="button" class="btn submit" ng-click="upload(preview)" ng-disabled="!preview.cords || progress.width" translate>Done</button>
</div>