added subviews
This commit is contained in:
Simon Busborg
@@ -48,6 +48,7 @@
|
||||
justify-content: center;
|
||||
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@@ -237,7 +238,7 @@
|
||||
|
||||
max-width: 25%;
|
||||
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: @black;
|
||||
|
||||
@@ -266,11 +267,8 @@
|
||||
}
|
||||
|
||||
.umb-packages-categories.-collapsed .umb-packages-category {
|
||||
margin-right: 20px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
margin-right: 15px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.-ma0 {
|
||||
|
||||
@@ -11,6 +11,25 @@
|
||||
vm.selectCategory = selectCategory;
|
||||
vm.showPackageDetails = showPackageDetails;
|
||||
|
||||
vm.page.navigation = [
|
||||
{
|
||||
"name": "Packages",
|
||||
"icon": "icon-cloud",
|
||||
"view": "views/packagesNew/views/repo.html",
|
||||
"active": true
|
||||
},
|
||||
{
|
||||
"name": "Installed",
|
||||
"icon": "icon-box",
|
||||
"view": "views/packagesNew/views/installed.html"
|
||||
},
|
||||
{
|
||||
"name": "Install local",
|
||||
"icon": "icon-add",
|
||||
"view": "views/packagesNew/views/install-local.html"
|
||||
}
|
||||
];
|
||||
|
||||
vm.categories = [
|
||||
{
|
||||
"id": 1,
|
||||
|
||||
@@ -11,96 +11,17 @@
|
||||
name-locked="true"
|
||||
hide-icon="true"
|
||||
hide-description="true"
|
||||
navigation="vm.page.navigation"
|
||||
hide-alias="true">
|
||||
</umb-editor-header>
|
||||
|
||||
<umb-editor-container>
|
||||
|
||||
<umb-editor-sub-header>
|
||||
<umb-editor-sub-header-content-left>
|
||||
|
||||
<umb-editor-sub-header-section>
|
||||
<div class="umb-packages-categories -collapsed">
|
||||
<a href="" class="umb-packages-category" ng-class="{'-active': category.active === true}" ng-click="vm.selectCategory(category)" ng-repeat="category in vm.categories">
|
||||
<i class="umb-packages-category-icon" ng-class="category.icon"></i>
|
||||
<div>{{ category.name }}</div>
|
||||
</a>
|
||||
</div>
|
||||
</umb-editor-sub-header-section>
|
||||
|
||||
</umb-editor-sub-header-content-left>
|
||||
</umb-editor-sub-header>
|
||||
|
||||
<div class="umb-packages-search">
|
||||
<input class="-full-width-input" type="text" name="name" value="" placeholder="Search for packages">
|
||||
</div>
|
||||
|
||||
<!-- <div class="umb-packages-categories">
|
||||
<a href="" class="umb-packages-category" ng-click="vm.selectCategory(category)" ng-repeat="category in vm.categories">
|
||||
<i class="umb-packages-category-icon" ng-class="category.icon"></i>
|
||||
<div>{{ category.name }}</div>
|
||||
</a>
|
||||
</div> -->
|
||||
|
||||
|
||||
<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-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 -->
|
||||
|
||||
|
||||
<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">
|
||||
<h4 class="umb-package-name">
|
||||
{{ package.name }}
|
||||
</h4>
|
||||
|
||||
<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 -->
|
||||
<umb-editor-sub-views
|
||||
ng-if="!vm.page.loading"
|
||||
sub-views="vm.page.navigation"
|
||||
model="vm.contentType">
|
||||
</umb-editor-sub-views>
|
||||
|
||||
</umb-editor-container>
|
||||
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
|
||||
angular.module("umbraco").controller("Umbraco.Editors.Packages.InstallLocalController");
|
||||
|
||||
})();
|
||||
@@ -0,0 +1,7 @@
|
||||
<div ng-controller="Umbraco.Editors.Packages.InstallLocalController as vm" class="clearfix">
|
||||
|
||||
<umb-load-indicator ng-if="page.loading"></umb-load-indicator>
|
||||
|
||||
Install Local
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1 @@
|
||||
Installed
|
||||
@@ -0,0 +1,120 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
function PackagesRepoController($scope, $route, $location) {
|
||||
|
||||
var vm = this;
|
||||
|
||||
vm.selectCategory = selectCategory;
|
||||
vm.showPackageDetails = showPackageDetails;
|
||||
|
||||
vm.categories = [
|
||||
{
|
||||
"id": 1,
|
||||
"icon": "icon-male-and-female",
|
||||
"name": "All",
|
||||
"active": true
|
||||
},
|
||||
{
|
||||
"icon": "icon-male-and-female",
|
||||
"name": "Collaboration",
|
||||
"active": false
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"icon": "icon-molecular-network",
|
||||
"name": "Backoffice extensions"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"icon": "icon-brackets",
|
||||
"name": "Developer tools"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"icon": "icon-wand",
|
||||
"name": "Starter kits"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"icon": "icon-medal",
|
||||
"name": "Umbraco Pro"
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"icon": "icon-wrench",
|
||||
"name": "Website utilities"
|
||||
}
|
||||
];
|
||||
|
||||
vm.packages = [
|
||||
{
|
||||
"id": 1,
|
||||
"name": "uSightly",
|
||||
"description": "An HTML5 audio player based on jPlayer",
|
||||
"karma": "1",
|
||||
"downloads": "1672",
|
||||
"icon":"https://our.umbraco.org/media/wiki/150283/635768313097111400_usightlylogopng.png?bgcolor=fff&height=154&width=281&format=png"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Kill IE6",
|
||||
"description": "A simple port of the IE6 warning script (http://code.google.com/p/ie6-upgrade-warning/) to use in your Umbraco websites.",
|
||||
"karma": "11",
|
||||
"downloads": "688",
|
||||
"icon":"https://our.umbraco.org/media/wiki/9138/634697622367666000_offroadcode-100x100.png?bgcolor=fff&height=154&width=281&format=png"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"name": "Examine Media Indexer",
|
||||
"description": "CogUmbracoExamineMediaIndexer",
|
||||
"karma": "3",
|
||||
"downloads": "1329",
|
||||
"icon":"https://our.umbraco.org/media/wiki/50703/634782902373558000_cogworks.jpg?bgcolor=fff&height=154&width=281&format=png"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"name": "SVG Icon Picker",
|
||||
"description": "A picker, for picking icons from an SVG spritesheet.",
|
||||
"karma": "5",
|
||||
"downloads": "8",
|
||||
"icon":"https://our.umbraco.org/media/wiki/154472/635997115126742822_logopng.png?bgcolor=fff&height=154&width=281&format=png"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"name": "Pipeline CRM",
|
||||
"description": "Pipeline is a social CRM that lives in Umbraco back-office. It tracks opportunities and helps teams collaborate with timelines and tasks. It stores information about your customers and your interactions with them. It integrates with your website, capturing opportunities from forms and powering personal portals.",
|
||||
"karma": "3",
|
||||
"downloads": "105",
|
||||
"icon":"https://our.umbraco.org/media/wiki/152476/635917291068518788_pipeline-crm-logopng.png?bgcolor=fff&height=154&width=281&format=png"
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"name": "CodeMirror",
|
||||
"description": "CodeMirror Editor for Umbraco",
|
||||
"karma": "1",
|
||||
"downloads": "70",
|
||||
"icon":"https://our.umbraco.org/media/wiki/151028/635810233171153461_logopng.png?bgcolor=fff&height=154&width=281&format=png"
|
||||
}
|
||||
];
|
||||
|
||||
function selectCategory(category) {
|
||||
var section = $route.current.params.section;
|
||||
var tree = $route.current.params.tree;
|
||||
var path = "/" + section + "/" + tree + "/category/" + category.id;
|
||||
$location.path(path);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
angular.module("umbraco").controller("Umbraco.Editors.Packages.RepoController", PackagesRepoController);
|
||||
|
||||
})();
|
||||
@@ -0,0 +1,91 @@
|
||||
<div class="" ng-controller="Umbraco.Editors.Packages.RepoController as vm">
|
||||
|
||||
<umb-editor-sub-header>
|
||||
<umb-editor-sub-header-content-left>
|
||||
|
||||
<umb-editor-sub-header-section>
|
||||
<div class="umb-packages-categories -collapsed">
|
||||
<a href="" class="umb-packages-category" ng-class="{'-active': category.active === true}" ng-click="vm.selectCategory(category)" ng-repeat="category in vm.categories">
|
||||
<i class="umb-packages-category-icon" ng-class="category.icon"></i>
|
||||
<div>{{ category.name }}</div>
|
||||
</a>
|
||||
</div>
|
||||
</umb-editor-sub-header-section>
|
||||
|
||||
</umb-editor-sub-header-content-left>
|
||||
</umb-editor-sub-header>
|
||||
|
||||
|
||||
<div class="umb-packages-search">
|
||||
<input class="-full-width-input" type="text" name="name" value="" placeholder="Search for packages">
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <div class="umb-packages-categories">
|
||||
<a href="" class="umb-packages-category" ng-click="vm.selectCategory(category)" ng-repeat="category in vm.categories">
|
||||
<i class="umb-packages-category-icon" ng-class="category.icon"></i>
|
||||
<div>{{ category.name }}</div>
|
||||
</a>
|
||||
</div> -->
|
||||
|
||||
|
||||
<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-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 -->
|
||||
|
||||
|
||||
<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">
|
||||
<h4 class="umb-package-name">
|
||||
{{ package.name }}
|
||||
</h4>
|
||||
|
||||
<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>
|
||||
Reference in New Issue
Block a user