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

Merge pull request #1131 from umbraco/temp-U4-7918

Browse Source 
Fixes U4-7918 Make icon picker for document type and list views consistent
This commit is contained in:
Warren Buckley
2016-02-19 12:03:27 +00:00
parent 183a5b5c43 0f8a13d60a
commit baaa9340e4
5 changed files with 78 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Umbraco.Web.UI.Client/src/less/belle.less
View File

@@ -107,6 +107,7 @@
@import "components/umb-grid.less";
@import "components/umb-empty-state.less";
@import "components/umb-property-editor.less";
@import "components/umb-iconpicker.less";
@import "components/buttons/umb-button.less";
@import "components/buttons/umb-button-group.less";

46
src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less Normal file
View File

@@ -0,0 +1,46 @@
.umb-iconpicker {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0;
}
.umb-iconpicker-item {
display: flex;
flex-direction: row;
flex: 0 0 14.28%;
justify-content: center;
align-items: center;
margin-bottom: 0;
overflow: hidden;
}
.umb-iconpicker-item a {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
padding: 15px 0;
text-decoration: none;
}
.umb-iconpicker-item a:hover,
.umb-iconpicker-item a:focus{
background: darken(@grayLighter, 1%);
outline: none;
}
.umb-iconpicker-item a:active {
background: darken(@grayLighter, 4%);
}
.umb-iconpicker-item i {
font-size: 30px;
}

47
src/Umbraco.Web.UI.Client/src/views/common/dialogs/iconpicker.html
View File

@@ -2,55 +2,48 @@
<div class="umb-panel-header">
<div class="umb-el-wrap umb-panel-buttons">
<div class="form-search">
<i class="icon-search"></i>
<i class="icon-search"></i>
<input type="text"
style="width: 100%"
ng-model="searchTerm"
class="umb-search-field search-query input-block-level"
style="width: 100%"
ng-model="searchTerm"
class="umb-search-field search-query input-block-level"
placeholder="Filter...">
</div>
</div>
</div>
<div class="umb-panel-body with-footer">
<div class="umb-control-group">
<select ng-model="color" class="input-block-level">
<option value="">Black</option>
<option value="color-green">Green</option>
<option value="color-yellow">Yellow</option>
<option value="color-green">Green</option>
<option value="color-yellow">Yellow</option>
<option value="color-orange">Orange</option>
<option value="color-blue">Blue</option>
<option value="color-blue">Blue</option>
<option value="color-red">Red</option>
</select>
<!--
<select class="input-block-level">
<option value="">Black</option>
<option value="color-green">Green</option>
<option value="color-blue">Turquoise</option>
<option value="color-purple">Purple</option>
<option value="color-red">Red</option>
<option value="color-orange">Orange</option>
<option value="color-sky-blue">Sky blue</option>
<option value="color-yellow">Yellow</option>
</select>-->
</div>
<div class="umb-loader" ng-hide="icons"></div>
<umb-load-indicator ng-if="loading"></umb-load-indicator>
<div class="umb-control-group">
<ul class="umb-thumbnails thumbnails" ng-class="color">
<li class="span1" ng-repeat="icon in icons|filter: searchTerm">
<a href="#" title="{{icon}}" class="thumbnail" ng-click="submitClass(icon)" prevent-default>
<i class="{{icon}} large" style="font-size: 32px"></i>
<div class="umb-control-group" ng-show="!loading">
<ul class="umb-iconpicker" ng-class="color" ng-show="icons">
<li class="umb-iconpicker-item" ng-repeat="icon in filtered = (icons | filter: searchTerm) track by $id(icon)">
<a href="#" title="{{icon}}" ng-click="submitClass(icon)" prevent-default>
<i class="{{icon}} large"></i>
</a>
</li>
</ul>
</div>
<umb-empty-state
ng-if="filtered.length === 0"
position="center">
<localize key="defaultdialogs_noIconsFound">No icons were found.</localize>
</umb-empty-state>
</div>
<div class="umb-panel-footer" >
<div class="umb-el-wrap umb-panel-buttons">
<div class="btn-toolbar umb-btn-toolbar pull-right">

15
src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.html
View File

@@ -38,14 +38,19 @@
<umb-load-indicator ng-if="loading"></umb-load-indicator>
<div class="umb-control-group" ng-show="!loading">
<ul class="umb-thumbnails thumbnails" ng-class="color">
<li class="span1" ng-repeat="icon in icons|filter: searchTerm">
<a href="#" title="{{icon}}" class="thumbnail" ng-click="selectIcon(icon, color)" prevent-default>
<i class="{{icon}} large" style="font-size: 32px"></i>
<div class="umb-control-group" ng-show="!loading && filtered.length > 0 ">
<ul class="umb-iconpicker" ng-class="color" ng-show="icons">
<li class="umb-iconpicker-item" ng-repeat="icon in filtered = (icons | filter: searchTerm) track by $id(icon)">
<a href="#" title="{{icon}}" ng-click="selectIcon(icon, color)" prevent-default>
<i class="{{icon}} large"></i>
</a>
</li>
</ul>
</div>
<umb-empty-state
ng-if="filtered.length === 0"
position="center">
<localize key="defaultdialogs_noIconsFound">No icons were found.</localize>
</umb-empty-state>
</div>

1
src/Umbraco.Web.UI/umbraco/config/lang/en.xml
View File

@@ -265,6 +265,7 @@
<key alias="selectContent">Select content</key>
<key alias="selectMember">Select member</key>
<key alias="selectMemberGroup">Select member group</key>
<key alias="noIconsFound">No icons were found</key>
<key alias="noMacroParams">There are no parameters for this macro</key>