yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed categories

Browse Source
This commit is contained in:
Simon Busborg
2016-05-27 14:52:31 +02:00
parent a04cb1d970
commit 5b9d063808
5 changed files with 147 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less
View File

@@ -27,7 +27,7 @@
.umb-packages {
margin: 0 -10px;
// margin: 0 -10px;
}
@@ -225,31 +225,32 @@
margin-bottom: 30px;
}
.umb-packages-category {
display: flex;
align-items: center;
flex: 1 0 auto;
max-width: 25%;
background-color: @blue;
padding: 10px;
font-size: 13px;
border-radius: 3px;
color: @white;
box-sizing: border-box;
flex: 1 0 auto;
margin: 5px;
justify-content: center;
&:hover {
background-color: @blueDark;
//box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}
opacity: .6;
max-width: 25%;
font-size: 13px;
font-weight: bold;
color: @black;
box-sizing: border-box;
justify-content: center;
}
.umb-packages-category:hover,
.umb-packages-category:focus {
text-decoration: none;
color: @white;
opacity: 1;
}
.umb-packages-category-icon {
@@ -258,3 +259,26 @@
display: none;
}
// Collapsed
.umb-packages-categories.-collapsed {
margin-bottom: 0;
}
.umb-packages-categories.-collapsed .umb-packages-category {
margin-right: 20px;
&:last-child {
margin-right: 0;
}
}
.-ma0 {
margin: 0 !important;
}
.-collapsed .umb-packages-category.-active {
color: @black;
opacity: 1;
border-bottom: 2px solid @black;
}

8
src/Umbraco.Web.UI.Client/src/views/packagesNew/category.controller.js
View File

@@ -13,7 +13,13 @@
vm.categories = [
{
"icon": "icon-male-and-female",
"name": "Collaboration"
"name": "All",
"active": false
},
{
"icon": "icon-male-and-female",
"name": "Collaboration",
"active": true
},
{
"icon": "icon-molecular-network",

78
src/Umbraco.Web.UI.Client/src/views/packagesNew/category.html
View File

@@ -1,4 +1,4 @@
<div ng-controller="Umbraco.Editors.Packages.CategoryController as vm">
<div ng-controller="Umbraco.Editors.Packages.CategoryController as vm" class="clearfix">
<umb-load-indicator ng-if="page.loading"></umb-load-indicator>
@@ -16,7 +16,81 @@
<umb-editor-container>
This is my category
<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>
<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="#">
<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="#">
<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-container>

8
src/Umbraco.Web.UI.Client/src/views/packagesNew/overview.controller.js
View File

@@ -14,7 +14,13 @@
vm.categories = [
{
"icon": "icon-male-and-female",
"name": "Collaboration"
"name": "All",
"active": true
},
{
"icon": "icon-male-and-female",
"name": "Collaboration",
"active": false
},
{
"icon": "icon-molecular-network",

21
src/Umbraco.Web.UI.Client/src/views/packagesNew/overview.html
View File

@@ -1,4 +1,4 @@
<div ng-controller="Umbraco.Editors.Packages.OverviewController as vm">
<div ng-controller="Umbraco.Editors.Packages.OverviewController as vm" class="clearfix">
<umb-load-indicator ng-if="page.loading"></umb-load-indicator>
@@ -16,16 +16,31 @@
<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">
<!-- <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>
</div> -->
<h4><strong>Popular</strong></h4>