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

remove folder logic from media grid

Browse Source
This commit is contained in:
Mads Rasmussen
2015-10-16 17:21:08 +02:00
parent 7e58b28f2b
commit a2e8f27c68
3 changed files with 16 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js
View File

@@ -5,7 +5,6 @@
function link(scope, el, attr, ctrl) {
scope.folders = [];
scope.mediaItems = [];
var itemMaxHeight = 200;
@@ -25,7 +24,6 @@
function activate() {
scope.folders = [];
scope.mediaItems = [];
for (var i = 0; scope.items.length > i; i++) {
@@ -87,9 +85,7 @@
function seperateFolderAndMediaItems(item) {
if(item.isFolder){
scope.folders.push(item);
} else {
if(!item.isFolder){
scope.mediaItems.push(item);
}

67
src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less
View File

@@ -2,69 +2,12 @@
display: flex;
flex-wrap: wrap;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
width: 100%;
margin-bottom: 30px;
}
/* ---------- FOLDERS --------- */
.umb-media-grid__folders {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
margin-bottom: 20px;
}
.umb-media-grid__folder {
background: @grayLighter;
margin: 5px;
display: flex;
align-items: center;
padding: 10px 20px;
box-sizing: border-box;
flex: 1 1 200px;
border: 1px solid transparent;
transition: border 0.2s;
position: relative;
justify-content: space-between;
}
.umb-media-grid__folder:focus,
.umb-media-grid__folder:active {
text-decoration: none;
}
.umb-media-grid__folder:hover {
text-decoration: none;
border: 1px solid @blue;
}
.umb-media-grid__folder-description {
display: flex;
align-items: center;
}
.umb-media-grid__folder-icon {
font-size: 20px;
color: @gray;
margin-right: 20px;
}
.umb-media-grid__folder-name {
font-size: 13px;
}
/* ---------- MEDIA ---------- */
.umb-media-grid__media {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
align-items: center;
}
.umb-media-grid__item {
margin: 7px;
position: relative;
@@ -76,12 +19,6 @@
text-decoration: none;
}
.umb-media-grid__item-image-placeholder {
width: 200px;
height: 200px;
display: inline-block;
}
.umb-media-grid__item-image {
width: 100%;
max-width: 100%;

45
src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
View File

@@ -1,40 +1,21 @@
<div class="umb-media-grid">
<div class="umb-media-grid" ui-sortable="mediaItemsSortingOptions" ng-model="mediaItems">
<div class="umb-media-grid__folders">
<a href="#{{item.editPath}}" ng-repeat="item in mediaItems" ng-style="item.flexStyle" class="umb-media-grid__item">
<a href="#{{folder.editPath}}" class="umb-media-grid__folder" ng-repeat="folder in folders">
<div class="umb-media-grid__actions">
<i class="icon-info umb-media-grid__action -not-clickable" ng-if="detailsHover" ng-mouseover="onDetailsOver(item, $event)" ng-mouseleave="onDetailsOut(item, $event)"></i>
<i class="icon-check umb-media-grid__action" ng-click="toggleSelectItem(item)" ng-class="{'-selected': item.selected}" prevent-default></i>
</div>
<div class="umb-media-grid__folder-description">
<i class="umb-media-grid__folder-icon {{ folder.icon }}"></i>
<div class="umb-media-grid__folder-name">{{ folder.name }}</div>
</div>
<div class="umb-media-grid__item-overlay">
<div class="umb-media-grid__item-name">{{item.name}}</div>
</div>
<i class="icon-check umb-media-grid__action" ng-click="toggleSelectItem(folder)" ng-class="{'-selected': folder.selected}" prevent-default></i>
<img class="umb-media-grid__item-image" ng-if="item.thumbnail" ng-src="{{item.thumbnail}}" alt="{{item.name}}" ng-class="{'-faded': item.selected}" />
<img class="umb-media-grid__item-image" ng-if="!item.thumbnail" src="assets/img/transparent.png" alt="{{item.name}}" />
</a>
<i class="umb-media-grid__item-icon {{ item.icon }}" ng-if="!item.thumbnail"></i>
</div>
<div class="umb-media-grid__media" ui-sortable="mediaItemsSortingOptions" ng-model="mediaItems">
<a href="#{{item.editPath}}" ng-repeat="item in mediaItems" ng-style="item.flexStyle" class="umb-media-grid__item">
<div class="umb-media-grid__actions">
<i class="icon-info umb-media-grid__action -not-clickable" ng-if="detailsHover" ng-mouseover="onDetailsOver(item, $event)" ng-mouseleave="onDetailsOut(item, $event)"></i>
<i class="icon-check umb-media-grid__action" ng-click="toggleSelectItem(item)" ng-class="{'-selected': item.selected}" prevent-default></i>
</div>
<div class="umb-media-grid__item-overlay">
<div class="umb-media-grid__item-name">{{item.name}}</div>
</div>
<img class="umb-media-grid__item-image" ng-if="item.thumbnail" ng-src="{{item.thumbnail}}" alt="{{item.name}}" ng-class="{'-faded': item.selected}" />
<img class="umb-media-grid__item-image" ng-if="!item.thumbnail" src="assets/img/transparent.png" alt="{{item.name}}" />
<i class="umb-media-grid__item-icon {{ item.icon }}" ng-if="!item.thumbnail"></i>
</a>
</div>
</a>
</div>