138 lines
6.5 KiB
HTML
138 lines
6.5 KiB
HTML
<div ng-controller="Umbraco.Editors.Packages.InstallLocalController as vm">
|
|
|
|
<div class="umb-packages-view-wrapper" ng-if="vm.state === 'upload'">
|
|
|
|
<!-- Upload -->
|
|
<div class="flex items-center justify-center">
|
|
<form novalidate name="localPackageForm" class="flex flex-column justify-center items-center tc">
|
|
|
|
<!-- Drag and drop files area -->
|
|
<div ngf-drop
|
|
ng-hide="hideDropzone"
|
|
ng-model="filesHolder"
|
|
ngf-change="handleFiles($files, $event)"
|
|
class="umb-upload-local__dropzone"
|
|
ngf-drag-over-class="drag-over"
|
|
ngf-multiple="false"
|
|
ngf-allow-dir="false"
|
|
ngf-pattern="*.zip"
|
|
ngf-max-size="{{ maxFileSize }}"
|
|
ng-class="{'is-small': compact!=='false' || (done.length+queue.length) > 0 }">
|
|
|
|
|
|
<div class="content">
|
|
|
|
<!-- Drag and drop illustration -->
|
|
<i class="icon-box" draggable="false"></i>
|
|
<small class="faded" draggable="false"><strong>Drop to upload</strong></small>
|
|
|
|
<!-- Select files -->
|
|
<div class="umb-upload-local__select-file"
|
|
ngf-select
|
|
ng-model="filesHolder"
|
|
ngf-change="handleFiles($files, $event)"
|
|
ngf-multiple="true"
|
|
ngf-pattern="*.zip"
|
|
ngf-max-size="{{ maxFileSize }}">
|
|
- <localize key="media_orClickHereToUpload">or click here to choose files</localize>
|
|
</div>
|
|
|
|
<div class="umb-info-local-item text-error" ng-if="vm.zipFile.uploadStatus === 'error'">
|
|
{{vm.zipFile.serverErrorMessage}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h3><strong>Upload package</strong></h3>
|
|
<p class="faded">
|
|
Install a local package by selecting it from your machine. Only install packages from sources you know and trust.
|
|
</p>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div ng-if="vm.state === 'packageDetails'">
|
|
|
|
<umb-editor-sub-header>
|
|
<umb-editor-sub-header-content-left>
|
|
<a class="umb-package-details__back-link" href="" ng-click="vm.state = 'upload'">← Cancel and upload another package</a>
|
|
</umb-editor-sub-header-content-left>
|
|
</umb-editor-sub-header>
|
|
|
|
<div class="umb-packages-view-wrapper">
|
|
|
|
<!-- Package details -->
|
|
<div class="flex items-center justify-center">
|
|
<div class="umb-info-local-items">
|
|
|
|
<form novalidate name="localPackageForm" class="w-100">
|
|
<div class="umb-package-icon">
|
|
<i ng-if="!vm.localPackage.iconUrl" class="icon-box"></i>
|
|
<img ng-if="vm.localPackage.iconUrl" ng-src="{{vm.localPackage.iconUrl}}" alt="" />
|
|
</div>
|
|
|
|
|
|
<div class="umb-package-info">
|
|
<h4 class="umb-info-local-item"><strong>{{ vm.localPackage.name }}</strong></h4>
|
|
|
|
<div class="umb-info-local-item">
|
|
<strong>Author</strong>
|
|
<a href="{{ vm.localPackage.authorUrl }}" target="_blank">{{ vm.localPackage.author }}</a>
|
|
</div>
|
|
|
|
<div class="umb-info-local-item">
|
|
<strong>Version</strong>
|
|
{{ vm.localPackage.version }}
|
|
</div>
|
|
|
|
<div class="umb-info-local-item">
|
|
<strong>License</strong>
|
|
<a href="{{ vm.localPackage.licenseUrl }}" target="_blank">{{ vm.localPackage.license }}</a>
|
|
</div>
|
|
|
|
<div class="umb-info-local-item">
|
|
<strong>Read me</strong>
|
|
<br>
|
|
<small ng-bind-html-unsafe="vm.localPackage.readMe"></small>
|
|
</div>
|
|
|
|
<div class="umb-info-local-item mt4 flex items-center flex-column" ng-if="vm.installState.status == '' && vm.localPackage.isCompatible">
|
|
<label for="license-accepts" class="umb-package-installer-label">
|
|
<input type="checkbox" id="license-accepts" ng-model="vm.localPackage.packageLicenseAccept" required no-dirty-check>
|
|
<strong class="label-text">I accept <a href="{{ vm.localPackage.licenseUrl }}" target="_blank">terms of use</a></strong>
|
|
</label>
|
|
<button type="button"
|
|
ng-class="{'-inactive' : localPackageForm.$invalid}"
|
|
ng-disabled="localPackageForm.$invalid"
|
|
class="umb-era-button -blue flex-inline mt3"
|
|
ng-click="vm.installPackage()">
|
|
Install package
|
|
</button>
|
|
</div>
|
|
|
|
<div class="umb-info-local-item">
|
|
<umb-progress-bar
|
|
ng-if="vm.installState.status !== ''"
|
|
percentage="{{vm.installState.progress}}">
|
|
</umb-progress-bar>
|
|
</div>
|
|
|
|
<div class="umb-info-local-item text-error" ng-if="!vm.localPackage.isCompatible">
|
|
This package cannot be installed, it requires a minimum Umbraco version of {{vm.localPackage.umbracoVersion}}
|
|
</div>
|
|
<div class="umb-info-local-item text-info">
|
|
<p>{{vm.installState.status}}</p>
|
|
</div>
|
|
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|