Add WebCms
This commit is contained in:
@@ -0,0 +1,137 @@
|
||||
<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>
|
||||
@@ -0,0 +1,122 @@
|
||||
<div ng-controller="Umbraco.Editors.Packages.InstalledController as vm">
|
||||
|
||||
<!-- Package list-->
|
||||
<div class="umb-packages-view-wrapper" ng-if="vm.state == 'list'">
|
||||
|
||||
<div ng-if="vm.installedPackages.length > 0">
|
||||
|
||||
<div class="umb-packages-view-title">Installed packages</div>
|
||||
|
||||
<div class="umb-package-list">
|
||||
|
||||
<div class="umb-package-list__item" ng-repeat="installedPackage in vm.installedPackages">
|
||||
|
||||
<div class="umb-package-list__item-icon">
|
||||
<i ng-if="!installedPackage.icon" class="icon-box"></i>
|
||||
<img ng-if="installedPackage.icon" ng-src="{{installedPackage.icon}}" />
|
||||
</div>
|
||||
|
||||
<div class="umb-package-list__item-content">
|
||||
<div class="umb-package-list__item-name">{{ installedPackage.name }}</div>
|
||||
<div class="umb-package-list__item-description">
|
||||
{{ installedPackage.version }} | <a href="{{ installedPackage.url }}" target="_blank">{{ installedPackage.url }}</a>| {{ installedPackage.author }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-list__item-actions">
|
||||
<button type="button" class="umb-era-button" ng-click="vm.confirmUninstall(installedPackage)">Uninstall</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<umb-empty-state
|
||||
ng-if="vm.installedPackages.length === 0"
|
||||
position="center">
|
||||
<h4><strong>You don’t have any packages installed.</strong></h4>
|
||||
<p class="faded">You don’t have any packages installed. Either install a local package by selecting it from your machine, or browse through available packages using the "Package" icon in the top right of your screen."</p>
|
||||
</umb-empty-state>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Package details -->
|
||||
<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 = 'list'">← Take me back</a>
|
||||
</umb-editor-sub-header-content-left>
|
||||
</umb-editor-sub-header>
|
||||
|
||||
<div class="flex items-center justify-center">
|
||||
|
||||
<div class="umb-info-local-items">
|
||||
|
||||
<form novalidate name="uninstallForm" class="w-100">
|
||||
<div class="umb-package-icon">
|
||||
<i ng-if="!vm.package.iconUrl" class="icon-box"></i>
|
||||
<img ng-if="vm.package.iconUrl" ng-src="{{vm.package.iconUrl}}" alt="" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="umb-package-info">
|
||||
<h4 class="umb-info-local-item"><strong>{{ vm.package.name }}</strong></h4>
|
||||
|
||||
<div class="umb-info-local-item">
|
||||
<strong>Author</strong>
|
||||
<a href="{{ vm.package.authorLink }}" target="_blank">{{ vm.package.author }}</a>
|
||||
</div>
|
||||
|
||||
<div class="umb-info-local-item">
|
||||
<strong>Version</strong>
|
||||
{{ vm.package.version }}
|
||||
</div>
|
||||
|
||||
<div class="umb-info-local-item">
|
||||
<strong>License</strong>
|
||||
<a href="{{ vm.package.licenseUrl }}" target="_blank">{{ vm.package.license }}</a>
|
||||
</div>
|
||||
|
||||
<div class="umb-info-local-item">
|
||||
<strong>Read me</strong>
|
||||
<br>
|
||||
<small> {{ vm.package.readme }} </small>
|
||||
</div>
|
||||
|
||||
<div class="umb-info-local-item mt4 flex items-center flex-column" ng-if="vm.installState.status == ''">
|
||||
<label for="confirm-uninstall" class="umb-package-installer-label">
|
||||
<input type="checkbox" id="confirm-uninstall" ng-model="vm.package.confirmUninstall" required no-dirty-check>
|
||||
<strong class="label-text">Confirm package uninstall</strong>
|
||||
</label>
|
||||
<button type="button"
|
||||
ng-class="{'-inactive' : uninstallForm.$invalid}"
|
||||
ng-disabled="uninstallForm.$invalid"
|
||||
class="umb-era-button -blue flex-inline mt3"
|
||||
ng-click="vm.uninstallPackage(vm.package)">
|
||||
Uninstall 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-info">
|
||||
<p>{{vm.installState.status}}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,351 @@
|
||||
<div ng-controller="Umbraco.Editors.Packages.RepoController as vm" class="clearfix">
|
||||
|
||||
<umb-load-indicator ng-show="vm.loading"></umb-load-indicator>
|
||||
|
||||
<!-- LIST -->
|
||||
<div class="umb-packages-view-wrapper" ng-if="vm.packageViewState === 'packageList'">
|
||||
|
||||
<div class="umb-packages-section">
|
||||
<div class="umb-packages-search">
|
||||
<input class="-full-width-input" type="text" name="query" placeholder="Search for packages" umb-auto-focus ng-model="vm.searchQuery" ng-change="vm.search()" no-dirty-check>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-show="vm.loading === false">
|
||||
|
||||
<div class="umb-packages-section" ng-if="vm.searchQuery == ''">
|
||||
<div class="umb-packages-categories">
|
||||
<a href=""
|
||||
class="umb-packages-category"
|
||||
ng-click="vm.selectCategory(category, vm.categories)"
|
||||
ng-repeat="category in vm.categories"
|
||||
ng-class="{'-active': category.active, '-first': $first, '-last': $last}">
|
||||
<div>{{ category.name }}</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-packages-section" ng-if="vm.searchQuery == ''">
|
||||
<h4><strong>Popular</strong></h4>
|
||||
<div class="umb-packages clearfix">
|
||||
|
||||
<div class="umb-package" ng-repeat="package in vm.popular">
|
||||
<a class="umb-package-link" href="" ng-click="vm.showPackageDetails(package)">
|
||||
|
||||
<div class="umb-package-icon">
|
||||
<img ng-src="{{package.icon}}" alt="" />
|
||||
</div>
|
||||
|
||||
<div class="umb-package-info">
|
||||
<div class="umb-package-name">{{ package.name }}</div>
|
||||
<div class="umb-package-description">{{ package.excerpt | limitTo: 40 }}<span ng-if="package.excerpt > (package.excerpt | limitTo: 40)">...</span></div>
|
||||
|
||||
<div class="umb-package-numbers">
|
||||
<small class="umb-package-downloads">
|
||||
<i class="icon-download-alt"></i> <strong>{{ package.downloads }}</strong>
|
||||
</small>
|
||||
<small class="umb-package-likes">
|
||||
<i class="icon-hearts"></i> <strong>{{ package.likes }}</strong>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</a>
|
||||
</div> <!-- end package -->
|
||||
|
||||
</div> <!-- end packages -->
|
||||
</div>
|
||||
|
||||
<div class="umb-packages-section" ng-if="vm.packages.length > 0">
|
||||
|
||||
<h4 ng-if="vm.searchQuery === ''"><strong>New Releases</strong></h4>
|
||||
<h4 ng-if="vm.searchQuery !== ''"><strong>Results for '{{ vm.searchQuery }}'</strong></h4>
|
||||
|
||||
<div class="umb-packages clearfix">
|
||||
|
||||
<div class="umb-package" ng-repeat="package in vm.packages">
|
||||
<a class="umb-package-link" href="" ng-click="vm.showPackageDetails(package)">
|
||||
|
||||
<div class="umb-package-icon">
|
||||
<img ng-src="{{ package.icon }}" alt="" />
|
||||
</div>
|
||||
|
||||
<div class="umb-package-info">
|
||||
<div class="umb-package-name">{{ package.name }}</div>
|
||||
<div class="umb-package-description">{{ package.excerpt | limitTo: 40 }}<span ng-if="package.excerpt > (package.excerpt | limitTo: 40)">...</span></div>
|
||||
|
||||
<div class="umb-package-numbers">
|
||||
<small class="umb-package-downloads">
|
||||
<i class="icon-download-alt"></i> <strong>{{ package.downloads }}</strong>
|
||||
</small>
|
||||
<small class="umb-package-likes">
|
||||
<i class="icon-hearts"></i> <strong>{{ package.likes }}</strong>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</a>
|
||||
</div> <!-- end package -->
|
||||
|
||||
</div> <!-- end packages -->
|
||||
</div>
|
||||
|
||||
<div class="umb-packages__pagination" ng-if="vm.pagination.totalPages > 1 && vm.loading === false">
|
||||
|
||||
<umb-pagination page-number="vm.pagination.pageNumber"
|
||||
total-pages="vm.pagination.totalPages"
|
||||
on-next="vm.nextPage"
|
||||
on-prev="vm.prevPage"
|
||||
on-go-to-page="vm.goToPage">
|
||||
</umb-pagination>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Empty state -->
|
||||
<umb-empty-state
|
||||
ng-if="vm.packages.length === 0 && vm.loading === false && vm.searchQuery !== ''"
|
||||
position="center">
|
||||
<h4><strong>We couldn't find anything for '{{ vm.searchQuery }}'</strong></h4>
|
||||
<p class="faded">Please try searching for another package or browse through the categories.</p>
|
||||
</umb-empty-state>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- DETAILS --->
|
||||
<div ng-if="vm.packageViewState === 'packageDetails' && vm.loading === false">
|
||||
|
||||
<umb-editor-sub-header>
|
||||
<umb-editor-sub-header-content-left>
|
||||
<a class="umb-package-details__back-link" href="" ng-click="vm.setPackageViewState('packageList');">← Take me back</a>
|
||||
</umb-editor-sub-header-content-left>
|
||||
</umb-editor-sub-header>
|
||||
|
||||
<div class="umb-packages-view-wrapper">
|
||||
|
||||
<div class="umb-package-details">
|
||||
|
||||
<div class="umb-package-details__main-content">
|
||||
|
||||
<div class="umb-packages-view-title">{{ vm.package.name }}</div>
|
||||
|
||||
<div class="umb-package-details__description" ng-bind-html-unsafe="vm.package.description"></div>
|
||||
|
||||
<div class="umb-gallery">
|
||||
<div class="umb-gallery__thumbnails">
|
||||
<a class="umb-gallery__thumbnail" ng-repeat="image in vm.package.images" ng-click="vm.openLightbox($index, vm.package.images)">
|
||||
<img ng-src="{{ image.thumbnail }}" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<umb-lightbox
|
||||
ng-if="vm.lightbox.show"
|
||||
items="vm.lightbox.items"
|
||||
active-item-index="vm.lightbox.activeIndex"
|
||||
on-close="vm.closeLightbox">
|
||||
</umb-lightbox>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__sidebar">
|
||||
|
||||
<div class="umb-package-details__section">
|
||||
<button class="umb-era-button -blue -full-width"
|
||||
ng-if="vm.package.isValid === true"
|
||||
ng-click="vm.downloadPackage(vm.package)">Install package</button>
|
||||
|
||||
<button class="umb-era-button -inactive -full-width" ng-if="vm.package.isValid === false" disabled>
|
||||
<localize key="packager_packageAlreadyInstalled">Package is already installed</localize>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__section">
|
||||
<div class="umb-package-details__owner-profile">
|
||||
|
||||
<div class="umb-package-details__owner-profile-avatar">
|
||||
<umb-avatar
|
||||
size="m"
|
||||
img-src="{{ 'https://our.umbraco.org' + vm.package.ownerInfo.ownerAvatar }}">
|
||||
</umb-avatar>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="umb-package-details__owner-profile-name">{{ vm.package.ownerInfo.owner }}</div>
|
||||
<div class="umb-package-details__owner-profile-karma">
|
||||
{{ vm.package.ownerInfo.owner }} has <strong>{{ vm.package.ownerInfo.karma }}</strong> karma points
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__section">
|
||||
<div class="umb-package-details__section-title">Information</div>
|
||||
<div>
|
||||
|
||||
<div class="umb-package-details__information-item" ng-if="vm.package.ownerInfo.owner">
|
||||
<div class="umb-package-details__information-item-label">Owner:</div>
|
||||
<div class="umb-package-details__information-item-content">{{vm.package.ownerInfo.owner}}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item" ng-if="vm.package.ownerInfo.contributors">
|
||||
<div class="umb-package-details__information-item-label">Contributors:</div>
|
||||
<div class="umb-package-details__information-item-content">
|
||||
<span ng-repeat="contributor in vm.package.ownerInfo.contributors">{{ contributor }}<span ng-if="!$last">, </span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item" ng-if="vm.package.created">
|
||||
<div class="umb-package-details__information-item-label">Created:</div>
|
||||
<div class="umb-package-details__information-item-content">{{vm.package.created | date:'yyyy-MM-dd HH:mm:ss'}}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item" ng-if="vm.package.latestVersion">
|
||||
<div class="umb-package-details__information-item-label">Current version:</div>
|
||||
<div class="umb-package-details__information-item-content">{{vm.package.latestVersion}}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item" ng-if="vm.package.information.netVersion">
|
||||
<div class="umb-package-details__information-item-label">.Net Version:</div>
|
||||
<div class="umb-package-details__information-item-content">{{vm.package.information.netVersion}}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item" ng-if="vm.package.licenseName">
|
||||
<div class="umb-package-details__information-item-label">License:</div>
|
||||
<div class="umb-package-details__information-item-content">{{vm.package.licenseName}}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item" ng-if="vm.package.downloads">
|
||||
<div class="umb-package-details__information-item-label">Downloads:</div>
|
||||
<div class="umb-package-details__information-item-content">{{vm.package.downloads}}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item" ng-if="vm.package.ownerInfo.karma">
|
||||
<div class="umb-package-details__information-item-label">Likes:</div>
|
||||
<div class="umb-package-details__information-item-content">{{vm.package.likes}}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__section">
|
||||
<div class="umb-package-details__section-title">Compatibility</div>
|
||||
<div class="umb-package-details__section-description">This package is compatible with the following versions of Umbraco, as reported by community members. Full compatability cannot be gauranteed for versions reported below 100%</div>
|
||||
<div class="umb-package-details__compatability" ng-repeat="compatibility in vm.package.compatibility | filter:percentage > 0">
|
||||
<div class="umb-package-details__compatability-label">
|
||||
<span class="umb-package-details__information-item-label">{{compatibility.version}}</span>
|
||||
<span class="umb-package-details__information-item-label-2">({{compatibility.percentage}}%)</span>
|
||||
</div>
|
||||
|
||||
<umb-progress-bar
|
||||
percentage="{{compatibility.percentage}}">
|
||||
</umb-progress-bar>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__section" ng-if="vm.package.externalSources">
|
||||
<div class="umb-package-details__section-title">External sources</div>
|
||||
<div>
|
||||
<div class="umb-package-details__information-item" ng-repeat="externalSource in vm.package.externalSources">
|
||||
<a class="umb-package-details__link" target="_blank" href="{{ externalSource.url }}">
|
||||
<i class="icon-out"></i>
|
||||
{{ externalSource.name }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Package details -->
|
||||
<div ng-if="vm.packageViewState === 'packageInstall' && vm.loading === false">
|
||||
<umb-editor-sub-header>
|
||||
<umb-editor-sub-header-content-left>
|
||||
<a class="umb-package-details__back-link" href="" ng-click="vm.setPackageViewState('packageDetails');">← Take me back</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">
|
||||
|
||||
<form novalidate name="localPackageForm" class="w-100">
|
||||
<div class="umb-package-icon">
|
||||
<i ng-if="!vm.localPackage.icon" class="icon-box"></i>
|
||||
<img ng-if="vm.localPackage.icon" ng-src="{{vm.localPackage.icon}}" 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.authorLink }}" 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-accept" class="umb-package-installer-label">
|
||||
<input type="checkbox" id="license-accept" 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-if="vm.installState.type !== 'error'"
|
||||
ng-class="{'-inactive' : localPackageForm.$invalid}"
|
||||
ng-disabled="localPackageForm.$invalid"
|
||||
class="umb-era-button -blue flex-inline mt3"
|
||||
ng-click="vm.installPackage(vm.localPackage)">
|
||||
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" ng-class="{'text-info' : vm.installState.type !== 'error'}">
|
||||
<p>{{vm.installState.status}}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user