newscoop/JS-Scoopwriter

<div
   class="dropped-image"
   ng-click="selectThis"
   ng-style="image.style.container"
   >
  <img
     ng-if="image"
     ng-src="{{root}}/images/{{image.basename}}"
     alt="{{image.basename}}"
     title="{{image.description}}"
     class="image"
     ng-style="image.style.image"
     >
  <button class="close" title="Remove">
    <span class="glyphicon glyphicon-remove"></span>
  </button>

  <div class="caption">
    <div ng-show="!editingCaption">
      <div class="static">{{image.description}}</div>

      <div ng-if="image.photographer" class="photographer">
        &copy; {{image.photographer}}
      </div>

      <button class="edit" title="Edit Caption" ng-click="editCaptionMode(true)">
        <i class="fa fa-pencil"></i>
      </button>
    </div>

    <div ng-show="editingCaption">
      <input type="text" ng-paste="pasteCaption($event)" ng-model="newCaption" />

      <div ng-if="image.photographer" class="photographer">
        &copy; {{image.photographer}}
      </div>

      <div class="btn-group">
        <button class="save" title="Save" ng-click="updateCaption()">
          <span class="glyphicon glyphicon-ok"></span>
        </button>
        <button class="cancel" title="Cancel" ng-click="editCaptionMode(false)">
          <span class="glyphicon glyphicon-remove"></span>
        </button>
      </div>
    </div>
  </div>

</div>

<!-- POPOVER BAR USED FOR IMAGE EDITING -->
<div class="popover no-arrow"
     id="img-toolbar-{{image.id}}">
  <div class="arrow"></div>
  <h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
  <div class="popover-content">
    <div
       class="popover-markup"
       >
      <button
         class="btn btn-default btn-xs small"
         ng-class="{active: activeSize === 'small'}"
         ng-click="setSize('small')"
         >
        <span class="glyphicon glyphicon-stop"></span>
        {{ ::('aes.settings.form.imagesize.small'|trans) }}
      </button><button
                  class="btn btn-default btn-xs medium"
                  ng-class="{active: activeSize === 'medium'}"
                  ng-click="setSize('medium')"
                  >
        <span class="glyphicon glyphicon-stop"></span>
        {{ ::('aes.settings.form.imagesize.medium'|trans) }}
      </button><button
                  class="btn btn-default btn-xs"
                  ng-class="{active: activeSize === 'big'}"
                  ng-click="setSize('big')"
                  >
        <span class="glyphicon glyphicon-stop"></span>
        {{ ::('aes.settings.form.imagesize.big'|trans) }}
      </button><button
                  class="btn btn-default btn-xs"
                  ng-class="{active: activeSize === 'original'}"
                  data-id="original"
                  ng-click="setSize('original')"
                  >
        {{ ::('aes.settings.form.imagesize.original'|trans) }}
      </button>
      <span class="pixels"><input
                              class="pixels"
                              type="number" min="1" step="1" pattern="\d+"
                              ng-model="widthPx"
                              ng-change="changePixelSize(widthPx)"
                              /> px</span>
      <div class="btn-group">

            <button
               class="btn btn-default btn-xs"
               ng-class="{active: activeAlignment === 'left'}"
               data-id="left"
               ng-click="setAlignment('left')"
               >
              <span class="glyphicon glyphicon-align-left"></span>
            </button><button
                        class="btn btn-default btn-xs"
                        ng-class="{active: activeAlignment === 'middle'}"
                        data-id="middle"
                        ng-click="setAlignment('middle')"
                        >
              <span class="glyphicon glyphicon-align-center"></span>
            </button><button
                        class="btn btn-default btn-xs"
                        ng-class="{active: activeAlignment === 'right'}"
                        data-id="right"
                        ng-click="setAlignment('right')"
                        >
              <span class="glyphicon glyphicon-align-right"></span>
            </button>
      </div>

    </div>
  </div>
</div>
<!-- END POPOVER BAR USED FOR IMAGE EDITING -->