362 lines
20 KiB
HTML
362 lines
20 KiB
HTML
<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" localize="placeholder" placeholder="@packager_packageSearch" 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><localize key="packager_packagesPopular">Popular</localize></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><localize key="packager_packagesNew">New Releases</localize></strong></h4>
|
|
<h4 ng-if="vm.searchQuery !== ''"><strong><localize key="packager_packageSearchResults">Results for</localize> '{{ 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><localize key="packager_packageNoResults">We couldn't find anything for</localize> '{{ vm.searchQuery }}'</strong></h4>
|
|
<p class="faded"><localize key="packager_packageNoResultsDescription">Please try searching for another package or browse through the categories</localize>.</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');">← <localize key="general_back">Back</localize></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 -green -full-width"
|
|
ng-if="vm.package.isValid === true"
|
|
ng-click="vm.downloadPackage(vm.package)"><localize key="packager_packageInstall">Install package</localize></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.com' + 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 }} <localize key="packager_packageHas">has</localize> <strong>{{ vm.package.ownerInfo.karma }}</strong> <localize key="packager_packageKarmaPoints">karma points</localize>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="umb-package-details__section">
|
|
<div class="umb-package-details__section-title"><localize key="packager_packageInfo">Information</localize></div>
|
|
<div>
|
|
|
|
<div class="umb-package-details__information-item" ng-if="vm.package.ownerInfo.owner">
|
|
<div class="umb-package-details__information-item-label"><localize key="packager_packageOwner">Owner</localize>:</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"><localize key="packager_packageContrib">Contributors</localize>:</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"><localize key="packager_packageCreated">Created</localize>:</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"><localize key="packager_packageCurrentVersion">Current version</localize>:</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"><localize key="packager_packageNetVersion">.NET Version</localize>:</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"><localize key="packager_packageLicense">License</localize>:</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"><localize key="packager_packageDownloads">Downloads</localize>:</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"><localize key="packager_packageLikes">Likes</localize>:</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"><localize key="packager_packageCompatibility">Compatibility</localize></div>
|
|
<div class="umb-package-details__section-description"><localize key="packager_packageCompatibilityDescription">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%</localize></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"><localize key="packager_packageExternalSources">External sources</localize></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');">← <localize key="general_back">Back</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">
|
|
|
|
<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><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-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"><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-if="vm.installState.type !== 'error'"
|
|
ng-class="{'-inactive' : localPackageForm.$invalid}"
|
|
ng-disabled="localPackageForm.$invalid"
|
|
class="umb-era-button -green flex-inline mt3"
|
|
ng-click="vm.installPackage(vm.localPackage)">
|
|
<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" ng-class="{'text-info' : vm.installState.type !== 'error'}">
|
|
<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>
|