move details view into repo sub view
This commit is contained in:
Mads Rasmussen
@@ -310,6 +310,16 @@
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.umb-package-details__back-link {
|
||||
font-weight: bold;
|
||||
color: @grayMed;
|
||||
}
|
||||
|
||||
.umb-package-details__back-link:hover {
|
||||
color: @black;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.umb-package-details__main-content {
|
||||
flex: 1 1 auto;
|
||||
margin-right: 40px;
|
||||
|
||||
@@ -5,8 +5,11 @@
|
||||
|
||||
var vm = this;
|
||||
|
||||
vm.packageViewState = "packageList";
|
||||
|
||||
vm.selectCategory = selectCategory;
|
||||
vm.showPackageDetails = showPackageDetails;
|
||||
vm.setPackageViewState = setPackageViewState;
|
||||
|
||||
vm.categories = [
|
||||
{
|
||||
@@ -129,6 +132,92 @@
|
||||
}
|
||||
];
|
||||
|
||||
vm.package = {
|
||||
"name": "Merchello",
|
||||
"description": "<p>Merchello is a high performance, designer friendly, open source Umbraco ecommerce package built for the store owner.</p> <p><strong>What Merchello does for you</strong></p> <p>In version 1, Merchello supports a large variety of products with options that can be attached to a single warehouse, processes orders, manages taxes and shipping, and sends out email notifications to your customers. The beauty of Merchello is that while it oversees all of your products, orders, and store settings, it allows Umbraco to maintain your content. This seamless integration gives you the flexibility to build your store in any way imagineable on a robust platform capable of handling a wide variety of store sizes.</p> <p><strong>Find out more on our website</strong></p> <p><strong><a href="https://merchello.com">https://merchello.com</a></strong></p> <p><strong>Contribute</strong></p> <p>We would love and need your help. If you want to contribute to Merchello's core, the easiest way to get started is to fork the project on https://github.com/merchello/Merchello and open src/Merchello.sln in Visual Studio. We're excited to see what you do!</p> <p><strong>Starter Kit</strong></p> <p>We have built a simple starter kit for Merchello called Bazaar, and you can download it below in the package files tab.</p>",
|
||||
"compatibility": [
|
||||
{
|
||||
"version": "7.4.x",
|
||||
"percentage": "100"
|
||||
},
|
||||
{
|
||||
"version": "7.3.x",
|
||||
"percentage": "86"
|
||||
},
|
||||
{
|
||||
"version": "7.2.x",
|
||||
"percentage": "93"
|
||||
},
|
||||
{
|
||||
"version": "7.1.x",
|
||||
"percentage": "100"
|
||||
}
|
||||
],
|
||||
"information": {
|
||||
"owner": "Rusty Swayne",
|
||||
"ownerAvatar": "https://our.umbraco.org/media/upload/d476d257-a494-46d9-9a00-56c2f94a55c8/our-profile.jpg?width=200&height=200&mode=crop",
|
||||
"ownerKarma": "2673",
|
||||
"contributors": [
|
||||
{
|
||||
"name": "Lee"
|
||||
},
|
||||
{
|
||||
"name": "Jason Prothero"
|
||||
}
|
||||
],
|
||||
"created": "18/12/2013",
|
||||
"currentVersion": "2.0.0",
|
||||
"netVersion": "4.5",
|
||||
"license": "MIT",
|
||||
"downloads": "4198",
|
||||
"karma": "53"
|
||||
},
|
||||
"externalSources": [
|
||||
{
|
||||
"name": "Source code",
|
||||
"url": "https://github.com/merchello/Merchello"
|
||||
},
|
||||
{
|
||||
"name": "Issue tracker",
|
||||
"url": "http://issues.merchello.com/youtrack/oauth?state=%2Fyoutrack%2FrootGo"
|
||||
}
|
||||
],
|
||||
"images": [
|
||||
{
|
||||
"thumbnail": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png?bgcolor=fff&height=154&width=281&format=png",
|
||||
"source": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png"
|
||||
},
|
||||
{
|
||||
"thumbnail": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png?bgcolor=fff&height=154&width=281&format=png",
|
||||
"source": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png"
|
||||
},
|
||||
{
|
||||
"thumbnail": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png?bgcolor=fff&height=154&width=281&format=png",
|
||||
"source": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png"
|
||||
},
|
||||
{
|
||||
"thumbnail": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png?bgcolor=fff&height=154&width=281&format=png",
|
||||
"source": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png"
|
||||
},
|
||||
{
|
||||
"thumbnail": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png?bgcolor=fff&height=154&width=281&format=png",
|
||||
"source": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png"
|
||||
},
|
||||
{
|
||||
"thumbnail": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png?bgcolor=fff&height=154&width=281&format=png",
|
||||
"source": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png"
|
||||
},
|
||||
{
|
||||
"thumbnail": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png?bgcolor=fff&height=154&width=281&format=png",
|
||||
"source": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png"
|
||||
},
|
||||
{
|
||||
"thumbnail": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png?bgcolor=fff&height=154&width=281&format=png",
|
||||
"source": "https://our.umbraco.org/media/wiki/104946/635591947547374885_Product-Listpng.png"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
function selectCategory(selectedCategory, categories) {
|
||||
for (var i = 0; i < categories.length; i++) {
|
||||
var category = categories[i];
|
||||
@@ -138,12 +227,14 @@
|
||||
}
|
||||
|
||||
function showPackageDetails(selectedPackage) {
|
||||
var section = $route.current.params.section;
|
||||
var tree = $route.current.params.tree;
|
||||
var path = "/" + section + "/" + tree + "/details/" + selectedPackage.id;
|
||||
$location.path(path);
|
||||
vm.packageViewState = "packageDetails";
|
||||
}
|
||||
|
||||
function setPackageViewState(state) {
|
||||
if(state) {
|
||||
vm.packageViewState = state;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -1,84 +1,220 @@
|
||||
<div class="umb-packages-view-wrapper" ng-controller="Umbraco.Editors.Packages.RepoController as vm">
|
||||
<div ng-controller="Umbraco.Editors.Packages.RepoController as vm" class="clearfix">
|
||||
|
||||
<div class="umb-packages-section">
|
||||
<div class="umb-packages-search">
|
||||
<input class="-full-width-input" type="text" name="name" value="" placeholder="Search for packages">
|
||||
<!-- 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="name" value="" placeholder="Search for packages">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-packages-section">
|
||||
<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">
|
||||
<h4><strong>Popular</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.description | limitTo: 40 }}<span ng-if="package.description > (package.description | 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-karma">
|
||||
<i class="icon-hearts"></i> <strong>{{ package.karma }}</strong>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</a>
|
||||
</div> <!-- end package -->
|
||||
|
||||
</div> <!-- end packages -->
|
||||
</div>
|
||||
|
||||
<div class="umb-packages-section">
|
||||
<h4><strong>Latest</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 src="{{ package.icon }}" alt="" />
|
||||
</div>
|
||||
|
||||
<div class="umb-package-info">
|
||||
<div class="umb-package-name">{{ package.name }}</div>
|
||||
<div class="umb-package-description">{{ package.description | limitTo: 40 }}<span ng-if="package.description > (package.description | 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-karma">
|
||||
<i class="icon-hearts"></i> <strong>{{ package.karma }}</strong>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</a>
|
||||
</div> <!-- end package -->
|
||||
|
||||
</div> <!-- end packages -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="umb-packages-section">
|
||||
<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>
|
||||
|
||||
<!-- DETAILS --->
|
||||
<div class="umb-packages-view-wrapper" ng-if="vm.packageViewState === 'packageDetails'">
|
||||
|
||||
<div class="umb-packages-section">
|
||||
<a class="umb-package-details__back-link" href="" ng-click="vm.setPackageViewState('packageList')">
|
||||
← Take me back
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-packages-section">
|
||||
<h4><strong>Popular</strong></h4>
|
||||
<div class="umb-packages clearfix">
|
||||
<div class="umb-package-details">
|
||||
|
||||
<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-details__main-content">
|
||||
|
||||
<div class="umb-package-icon">
|
||||
<img ng-src="{{package.icon}}" alt="" />
|
||||
<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" target="_blank" href="{{ image.source }}" ng-repeat="image in vm.package.images">
|
||||
<img ng-src="{{ image.thumbnail }}" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-info">
|
||||
<div class="umb-package-name">{{ package.name }}</div>
|
||||
<div class="umb-package-description">{{ package.description | limitTo: 40 }}<span ng-if="package.description > (package.description | limitTo: 40)">...</span></div>
|
||||
</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-karma">
|
||||
<i class="icon-hearts"></i> <strong>{{ package.karma }}</strong>
|
||||
</small>
|
||||
<div class="umb-package-details__sidebar">
|
||||
|
||||
<div class="umb-package-details__section">
|
||||
<button class="umb-era-button -blue -full-width">Install package</button>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__section">
|
||||
<div class="umb-package-details__owner-profile">
|
||||
<div class="umb-package-details__owner-profile-avatar">
|
||||
<img class="umb-avatar" ng-src="{{vm.package.information.ownerAvatar}}" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="umb-package-details__owner-profile-name">{{ vm.package.information.owner }}</div>
|
||||
<div class="umb-package-details__owner-profile-karma">
|
||||
{{ vm.package.information.owner }} has <strong>{{ vm.package.information.ownerKarma }}</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">
|
||||
<div class="umb-package-details__information-item-label">Owner:</div>
|
||||
<div>{{vm.package.information.owner}}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">Contributors:</div>
|
||||
<div ng-repeat="contributor in vm.package.information.contributors">
|
||||
<a class="umb-package-details__link" href="{{ contributor.profileUrl }}" target="_blank">{{ contributor.name }}<span ng-if="!$last">, </span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">Created:</div>
|
||||
<div>{{vm.package.information.created}}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">Current version:</div>
|
||||
<div>{{vm.package.information.created}}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">.Net Version:</div>
|
||||
<div>{{vm.package.information.netVersion}}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">License:</div>
|
||||
<div>{{vm.package.information.license}}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">Downloads:</div>
|
||||
<div>{{vm.package.information.downloads}}</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">Karma:</div>
|
||||
<div>{{vm.package.information.karma}}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</a>
|
||||
</div> <!-- end package -->
|
||||
</div>
|
||||
|
||||
</div> <!-- end packages -->
|
||||
</div>
|
||||
|
||||
<div class="umb-packages-section">
|
||||
<h4><strong>Latest</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 src="{{ package.icon }}" alt="" />
|
||||
</div>
|
||||
|
||||
<div class="umb-package-info">
|
||||
<div class="umb-package-name">{{ package.name }}</div>
|
||||
<div class="umb-package-description">{{ package.description | limitTo: 40 }}<span ng-if="package.description > (package.description | 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-karma">
|
||||
<i class="icon-hearts"></i> <strong>{{ package.karma }}</strong>
|
||||
</small>
|
||||
<div class="umb-package-details__section">
|
||||
<div class="umb-package-details__section-title">Compatibility</div>
|
||||
<div class="umb-package-details__section-description">This project is compatible with the following versions as reported by community members who have downloaded this package:</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>
|
||||
<div class="umb-progress-bar">
|
||||
<span class="umb-progress-bar__progress" style="width: {{compatibility.percentage}}%"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</a>
|
||||
</div> <!-- end package -->
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__section">
|
||||
<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> <!-- end packages -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user