184 lines
8.8 KiB
HTML
184 lines
8.8 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><localize key="packager_dropHere">Drop to upload</localize></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="packager_orClickHereToUpload">or click here to choose files</localize>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<h3><strong><localize key="packager_uploadPackage">Upload package</localize></strong></h3>
|
|
<p class="faded">
|
|
<localize key="packager_localPackageDescription">Install a local package by selecting it from your machine. Only install packages from sources you know and trust</localize>.
|
|
</p>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div ng-if="vm.state === 'uploading'">
|
|
|
|
<umb-editor-sub-header>
|
|
<umb-editor-sub-header-content-left>
|
|
<a class="umb-package-details__back-link" href="" ng-click="vm.state = 'upload'">← <localize key="packager_uploadAnother">Upload another package</localize></a>
|
|
</umb-editor-sub-header-content-left>
|
|
</umb-editor-sub-header>
|
|
|
|
<div class="umb-packages-view-wrapper">
|
|
|
|
<div class="flex items-center justify-center">
|
|
<div class="umb-info-local-items">
|
|
<div class="umb-package-icon">
|
|
<i ng-if="!vm.localPackage.iconUrl" class="icon-box"></i>
|
|
</div>
|
|
<div class="umb-package-info">
|
|
|
|
<h4 class="umb-info-local-item"><strong><localize key="packager_installStateUploading">Uploading package...</localize></strong></h4>
|
|
|
|
<umb-progress-bar
|
|
percentage="{{vm.zipFile.uploadProgress}}">
|
|
</umb-progress-bar>
|
|
|
|
<div class="umb-info-local-item text-error mt3" ng-if="vm.zipFile.uploadStatus === 'error'">
|
|
{{ vm.zipFile.serverErrorMessage }}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</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'">← <localize key="packager_cancelAndUploadAnother">Cancel and upload another package</localize></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><localize key="packager_packageAuthor">Author</localize></strong>
|
|
<a href="{{ vm.localPackage.authorUrl }}" target="_blank">{{ vm.localPackage.author }}</a>
|
|
</div>
|
|
|
|
<div class="umb-info-local-item">
|
|
<strong><localize key="packager_packageVersion">Version</localize></strong>
|
|
{{ vm.localPackage.version }}
|
|
</div>
|
|
|
|
<div class="umb-info-local-item">
|
|
<strong><localize key="packager_packageLicense">License</localize></strong>
|
|
<a href="{{ vm.localPackage.licenseUrl }}" target="_blank">{{ vm.localPackage.license }}</a>
|
|
</div>
|
|
|
|
<div class="umb-info-local-item">
|
|
<strong><localize key="packager_packageReadme">Read me</localize></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"><localize key="packager_accept">I accept</localize> <a href="{{ vm.localPackage.licenseUrl }}" target="_blank"><localize key="packager_termsOfUse">terms of use</localize></a></strong>
|
|
</label>
|
|
<button type="button"
|
|
ng-class="{'-inactive' : localPackageForm.$invalid}"
|
|
ng-disabled="localPackageForm.$invalid"
|
|
class="umb-era-button -green flex-inline mt3"
|
|
ng-click="vm.installPackage()">
|
|
<localize key="packager_packageInstall">Install package</localize>
|
|
</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">
|
|
<localize key="packager_targetVersionMismatch">This package cannot be installed, it requires a minimum Umbraco version of</localize> {{vm.localPackage.umbracoVersion}}
|
|
</div>
|
|
<div class="umb-info-local-item text-info">
|
|
<p>{{vm.installState.status}}</p>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="umb-info-local-item text-info"
|
|
ng-show="vm.installCompleted">
|
|
|
|
<button type="button"
|
|
|
|
class="btn btn-success flex-inline mt3"
|
|
ng-click="vm.reloadPage()">
|
|
<localize key="packager_installFinish">Finish</localize>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|