public/javascripts/app/templates/restore-list.html (262 lines of code) (raw):
<!-- ERROR STATUS -->
<div style="display: none"
class="modal center"
ng-controller="ErrorCtrl as errorCtrl"
ng-class="{ 'visually-hidden': !errorCtrl.hasError }">
<gu-box class="modal__content" variant="primary">
<gu-row class="modal__content__form__fieldset">
<gu-column span="12">
<h1 class="modal__content__title">Ooops, something went wrong</h1>
{{ errorCtrl.errorContent }}
</gu-column>
</gu-row>
<gu-row variant="reverse" class="modal__content__form__fieldset">
<!-- TODO ADD BACK TO COMPOSER BUTTON JP 15/4/15 -->
</gu-row>
</gu-box>
</div>
<!-- HEADER -->
<gu-row skin="header" ng-include src="'/assets/javascripts/app/templates/partials/header.html'"></gu-row>
<!-- PRELOADER -->
<div ng-if="isLoading">
<gu-loading-bars></gu-loading-bars>
</div>
<gu-row ng-if="!isLoading" class="content">
<gu-column class="sidebar"
span="4"
gu-box="secondary"
ng-class="{'active': isSidebarActive}"
ng-controller="SnapshotListInteractionCtrl as ctrl">
<div class="scrollable__container">
<!-- SNAPSHOT LIST HEADER -->
<div class="scrollable__header-fixed">
<h1 class="article-headline">{{ articleTitle }}</h1>
<h6 class="article-hash">
(<a href="{{articleURL}}" target="_blank">
{{ articleHash }}
</a>)
</h6>
<gu-row class="snapshot-list-header">
<span class="snapshot-list-header__decal" title="Content revision number">No.</span>
<span class="snapshot-list-header__content">Snapped at & last modified</span>
<span class="snapshot-list-header__status">Status</span>
</gu-row>
</div>
<!-- SNAPSHOT LIST -->
<div class="scrollable__body">
<ol class="index-list snapshot-list">
<!-- CONTENT -->
<li class="snapshot-list-secondary"
ng-repeat-start="model in models"
ng-if="model.isSecondary()">
Snapshot from secondary
</li>
<li class="snapshot-list__item index-list__item index-list__item--{{ model.get('activeState') ? 'tertiary' : 'primary' }}"
variant="{{ model.get('activeState') ? 'tertiary' : 'primary' }}"
ng-mouseenter="hovered=true"
ng-mouseleave="hovered=false"
ng-class="{ 'item-active': model.get('activeState'), 'highlight-row-for-launches': model.isBecauseOfLaunch() }">
<div class="index-list__item__index">{{model.getRevisionId() || (models.length - $index)}}</div>
<div class="snapshot-list__item__content"
ng-class="{ 'active': model.get('activeState') && isDisplayingHTML}"
ng-click="ctrl.onItemClicked($index)">
<h6 class="snapshot-list__item__content__actual-date" ng-bind-html="model.getCreatedDateHtml()"></h6>
<h6 class="snapshot-list__item__content__relative-date">{{ model.getRelativeDate() }} ago</h6>
<h6 class="snapshot-list__item__content__reason">Last modified by: {{ model.getUserEmail() }}</h6>
<h6 class="snapshot-list__item__content__reason"
ng-class="{ 'highlight-reason-for-launches': model.isBecauseOfLaunch() }">
{{ model.getSnapshotReason() }}
</h6>
</div>
<div class="snapshot-list__item__information">
<div class="snapshot-list__item__status"
ng-click="ctrl.onItemClicked($index)">
<div class="snapshot-list__item__status--left"
ng-click="ctrl.onItemClicked($index)">
<div class="snapshot-list__item__settings__legally-sensitive"
ng-show="model.isLegallySensitive()">
</div>
<div class="snapshot-list__item__settings__comments--on"
ng-show="model.commentsEnabled().on">
<div class="snapshot-list__item__settings__comments--on-image">
</div>
<div class="snapshot-list__item__settings__content--text">
on
</div>
</div>
<div class="snapshot-list__item__settings__comments--off"
ng-show="model.commentsEnabled().defined && !model.commentsEnabled().on">
<div class="snapshot-list__item__settings__comments--off-image">
</div>
<div class="snapshot-list__item__settings__content--text">
off
</div>
</div>
</div>
<div class="snapshot-list__item__status--right"
ng-click="ctrl.onItemClicked($index)"
ng-show="!!model.getPublishedState()">
{{model.getPublishedState()}}
</div>
</div>
</div>
</li>
<!-- DELTA TIME -->
<li class="delta-row" ng-repeat-end ng-mouseover="isActive = true" ng-mouseout="isActive = false">
<gu-row variant="reverse">
<gu-icon class="delta-row__icon" variant="expand-disabled"></gu-icon>
<span class="delta-row__content">
{{ model.getRelativeDate( models[$index + 1].get('createdDate') ) }}
</span>
</gu-row>
</li>
</ol>
</div>
</div>
</gu-column>
<!-- CONTENT -->
<gu-column class="snapshot-content"
span="8"
ng-controller="SnapshotContentCtrl as ctrl"
ng-class="{'active': isSettingContent === false}">
<div class="snapshot-content__viewport scrollable__container">
<gu-row class="snapshot-content__actions scrollable__header-fixed">
<gu-btn class="snapshot-content__actions--button"
ng-click="ctrl.restoreContent()"
ng-if="canRestore">
<gu-icon class="snapshot-content__actions__restore__icon" variant="wrench-disabled"></gu-icon>
<span>Restore</span>
</gu-btn>
<gu-btn class="snapshot-content__actions--button" ng-click="ctrl.copyJSON()">
{{copyButtonLabel}}
</gu-btn>
<a class="snapshot-content__actions--button btn btn" target="_blank" ng-href="/export/{{contentId}}/git">
Export all as Git Repo
</a>
<gu-btn class="snapshot-content__actions--button" ng-click="ctrl.toggleJSON()">
{{displayButtonLabel}}
</gu-btn>
</gu-row>
<div class="scrollable__body">
<div class="snapshot-content__furniture">
<gu-row class="snapshot-content__furniture__item">
<h4 class="snapshot-content__furniture__item--header">
Headline
</h4>
<p class="snapshot-content__furniture__item--content">
{{ headline }}
</p>
</gu-row>
<gu-row class="snapshot-content__furniture__item">
<h4 class="snapshot-content__furniture__item--header">
Standfirst
</h4>
<p class="snapshot-content__furniture__item--content">
{{ standfirst }}
</p>
</gu-row>
<gu-row class="snapshot-content__furniture__item">
<h4 class="snapshot-content__furniture__item--header">
TrailText
</h4>
<p class="snapshot-content__furniture__item--content">
{{ trailText }}
</p>
</gu-row>
</div>
<!-- TODO JP 15/4/15 Replace with accordion from components repo -->
<gu-row class="snapshot-content__container" ng-class="{ 'show-json': isShowingJSON }">
<!-- HTML CONTENT -->
<gu-column class="snapshot-content__container__item" span="6">
<div ng-bind-html="htmlContent"></div>
</gu-column>
<!-- JSON CONTENT -->
<gu-column span="6" class="snapshot-content__container__item--json">
<div>
<pre><code>{{ jsonContent }}</code></pre>
</div>
</gu-column>
</gu-row>
</div>
</div>
</gu-column>
<!-- MODAL -->
<!-- INLINE STYLE TO AVOID INITIAL FLASH OF CONTENT WITH THE MODAL -->
<div style="display: none"
class="modal center"
ng-controller="ModalCtrl as modalCtrl"
ng-class="{ 'visually-hidden': !isActive }">
<gu-box class="modal__content" variant="primary">
<form novalidate class="modal-form" ng-controller="RestoreFormCtrl as formCtrl" ng-submit="formCtrl.restore()">
<div class="modal__content__track">
<gu-row>
<gu-column ng-class="{ 'in-active': isLoading }" class="form-panel" span="6">
<!-- MODAL HEADER -->
<gu-row>
<gu-column span="12">
<h1 class="modal__content__title">Before you restore</h1>
</gu-column>
</gu-row>
<gu-row class="modal__content__container">
<gu-column span="12">
<gu-row>
<gu-column span="6">
<h2 class="modal__content__form__header">From:</h2>
</gu-column>
<gu-column span="6">
<h2 class="modal__content__form__header">To:</h2>
</gu-column>
</gu-row>
<gu-row>
<gu-column span="5" class="center">
<div class="modal__content__source">Snapshot of revision {{snapshotRevisionId}} taken <strong>{{snapshotSystem.isSecondary ? "from secondary" : ""}}</strong> at <span ng-bind-html="snapshotCreatedDate"></span></div>
</gu-column>
<gu-column span="1" class="center modal__content__destination-arrow">➔</gu-column>
<gu-column span="6" class="center">
<div class="full-width">
<ol class="modal__content__destination-list modal__content__destination-form">
<li ng-repeat="dest in destinations">
<label for="{{dest.systemId}}" class="modal__content__text">
<input type="radio"
class="no-shrink"
id="{{dest.systemId}}"
name="destination"
ng-disabled="!dest.available"
ng-model="$parent.selectedDestination"
ng-value="dest"/>
<span class="checked-decal"></span>
<span>{{dest.displayName}} <em ng-bind-html="dest.changeString"></em></span>
</label>
</li>
</ol>
</div>
</gu-column>
</gu-row>
</gu-column>
</gu-row>
<!-- FORM -->
<gu-row class="modal__content__container">
<gu-column span="12" class="modal__content__form">
<h2 class="modal__content__form__header">Make sure that:</h2>
<gu-row class="modal__content__form__fieldset">
<label for="self-in-content">
<input type="checkbox" ng-model="selfInContent" name="selfInContent"
id="self-in-content"/>
<span class="checked-decal"></span>
<span class="label">You are not in content</span>
</label>
</gu-row>
<gu-row class="modal__content__form__fieldset">
<label for="else-in-content">
<input type="checkbox" ng-model="elseInContent" name="elseInContent"
id="else-in-content"/>
<span class="checked-decal"></span>
<span class="label">No one else is in the content</span>
</label>
</gu-row>
</gu-column>
</gu-row>
<!-- ACTIONS -->
<gu-row variant="reverse" class="modal__content__container">
<gu-btn variant="active" class="modal__content__btn" type="submit"
ng-disabled="!selfInContent || !elseInContent">
<gu-icon variant="wrench-disabled"></gu-icon>
Restore Version
</gu-btn>
<gu-btn class="modal__content__btn--close" type="reset"
ng-click="modalCtrl.closeModal()">Cancel
</gu-btn>
</gu-row>
</gu-column>
<!-- LOADER -->
<gu-column span="6" class="form-loading" ng-class="{ 'in-active': isLoading }">
<gu-loading-bars></gu-loading-bars>
</gu-column>
</gu-row>
</div>
</form>
</gu-box>
</div>
</gu-row>