Using FontAwesome in Media Library

--HG--
branch : 1.x
This commit is contained in:
Sebastien Ros
2013-05-11 13:09:20 -07:00
parent 7868f90542
commit dfbcc7c00e
11 changed files with 128 additions and 33 deletions

View File

@@ -87,6 +87,12 @@ Website: http://fluentpath.codeplex.com/
Copyright: Copyright (c) 2011 Bertrand Le Roy
License: MS-PL
Font Awesome
-----
Author: Dave Gandy
Website: http://fontawesome.io
License: MIT License
Html Agility Pack
-----
Website: http://htmlagilitypack.codeplex.com/

View File

@@ -4,6 +4,7 @@ namespace Orchard.MediaLibrary {
public class ResourceManifest : IResourceManifestProvider {
public void BuildManifests(ResourceManifestBuilder builder) {
builder.Add().DefineStyle("MediaManagerAdmin").SetUrl("orchard-medialibrary-admin.css").SetDependencies("~/Themes/TheAdmin/Styles/Site.css");
builder.Add().DefineStyle("FontAwesome").SetUrl("//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css");
}
}
}

View File

@@ -1,3 +1,11 @@
.navicon-my-computer {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAPCAYAAAACsSQRAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAQpJREFUOE+dk7EKgzAQQDXSvfRHOvgDbgU3v8NPcHVxdfUH6uziLri6OAl+QycnkWvuyIUkxLZUeJjTu5e7iAEA+AgdIie28q3gX7wPDcxdfZ3QmgMfou97iOMY2raFfd+DLMsgSRLYto1FHyVh0zQkqOua7mVZgiHReXg3C4njOERRFJS8riukaQrLspAAZV8lsuU7Jud5DtM0UREzDAOwXEqeSnDBOi2Y55mSq6oCPgsXPBsecxxHWQbCkmChmXQGdtl1HeXKyzvOlWc/Q41zUwK7E4Q/Ixeo3R6yy5cj4RrdCS0QKREeCY16IiGsQEqiHyV6Y8SSSPAlgj8cg3PT7ApLgFjBf0DwBrFhrWGsTyEzAAAAAElFTkSuQmCC');
.navicon-my-computer:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
content: '\f015';
font-size: 14px;
color: black;
padding-right: 5px;
}

View File

@@ -1,3 +1,11 @@
.navicon-media-url {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAPCAYAAAACsSQRAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAQpJREFUOE+dk7EKgzAQQDXSvfRHOvgDbgU3v8NPcHVxdfUH6uziLri6OAl+QycnkWvuyIUkxLZUeJjTu5e7iAEA+AgdIie28q3gX7wPDcxdfZ3QmgMfou97iOMY2raFfd+DLMsgSRLYto1FHyVh0zQkqOua7mVZgiHReXg3C4njOERRFJS8riukaQrLspAAZV8lsuU7Jud5DtM0UREzDAOwXEqeSnDBOi2Y55mSq6oCPgsXPBsecxxHWQbCkmChmXQGdtl1HeXKyzvOlWc/Q41zUwK7E4Q/Ixeo3R6yy5cj4RrdCS0QKREeCY16IiGsQEqiHyV6Y8SSSPAlgj8cg3PT7ApLgFjBf0DwBrFhrWGsTyEzAAAAAElFTkSuQmCC');
.navicon-media-url:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
content: '\f01a';
font-size: 14px;
color: black;
padding-right: 5px;
}

View File

@@ -1,3 +1,11 @@
.navicon-web-search {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAQCAYAAADwMZRfAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAM9JREFUOE+tkjEOhCAQRbmTpYVW1usZtvQInoAzeB9OQE1ruZWJwZjZmUlgQVCzweJN9PP5kK8CAIrJiv+SCPu+N+M4QlVVnmEYwFqbeB3hS6O1jjYfUUqhLQ4g/MM8z9B1HZullCj9TNM0sV7XNRhjojUiMR4DHFfrPLAHQT2cnUS4m+b64bFtm+j7Htq2hWVZUIoDCPRA4InWeDxyE6K4E+KRr4O87v4TItdbGMK4fsKN1MO6rm/UP7mgJOQKPICCfLArODHe4YKKQlJAfAEg9PCE10BWgwAAAABJRU5ErkJggg==');
.navicon-web-search:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
content: '\f002';
font-size: 14px;
color: black;
padding-right: 5px;
}

View File

@@ -352,7 +352,7 @@
}
#media-library-main-navigation .navicon {
padding:0 0 0 20px;
padding:0 0 0 0;
background-repeat: no-repeat;
background-position: left;
display: block;

View File

@@ -18,11 +18,30 @@
}
#query {
background-position: right center;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAARCAIAAABbzbuTAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAKdJREFUOE+lkcEJAyEQRe0pRy+evFuHJViBNdiPFXj2agULooiZzbjGuIYgeSALf+aps5K6yR9CKUUp9biQUqaUWm2gCc651viJtRYbOqcQQuCcQ1lrjSlgjIGEUuq9b9GLU8Da2I0sc4JXv+8E4MnTMCTnLIRgjB3H0bKLZWn/BFh7M8Da/kvAt3cA5hnad/XSMUZMRuctLOm79NF/CAA6G8LEplDrE2p/mfIGi8fEAAAAAElFTkSuQmCC');
background-repeat: no-repeat;
padding-right: 20px;
box-sizing: border-box;
margin-bottom: 10px;
margin-right: 40px;
}
#query input {
width: 100%;
box-sizing: border-box;
height: 28px;
}
#icon {
float: right;
width:40px;
}
#icon button {
height: 28px;
width: 40px;
border: none;
cursor: pointer;
color: white;
background-color:black;
margin-bottom: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
font-size: 18px;
}

View File

@@ -17,6 +17,9 @@
overflow: auto;
background: #fff;
}
#websearch-results {
padding-left: 3px;
}
#websearch-results li {
margin-right: 4px;
@@ -149,12 +152,38 @@
/* SEARCH */
#query {
background-position: right center;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAARCAIAAABbzbuTAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAKdJREFUOE+lkcEJAyEQRe0pRy+evFuHJViBNdiPFXj2agULooiZzbjGuIYgeSALf+aps5K6yR9CKUUp9biQUqaUWm2gCc651viJtRYbOqcQQuCcQ1lrjSlgjIGEUuq9b9GLU8Da2I0sc4JXv+8E4MnTMCTnLIRgjB3H0bKLZWn/BFh7M8Da/kvAt3cA5hnad/XSMUZMRuctLOm79NF/CAA6G8LEplDrE2p/mfIGi8fEAAAAAElFTkSuQmCC');
background-repeat: no-repeat;
padding-right: 20px;
.query-container {
margin: 5px;
width: 90%;
margin-bottom: 10px;
}
#query {
margin-right: 40px;
}
#query input {
width: 100%;
box-sizing: border-box;
height: 28px;
}
#icon {
float: right;
width:40px;
}
#icon button {
height: 28px;
width: 40px;
border: none;
cursor: pointer;
color: white;
background-color:black;
margin-bottom: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
font-size: 18px;
}
.actions {

View File

@@ -13,6 +13,8 @@
RegisterImageSet("menu." + imageSet, "mediaproviders" /* style */, 16 /* bounding box */);
}
}
Style.Require("FontAwesome");
}

View File

@@ -12,8 +12,9 @@
Style.Include("orchard-medialibrary-admin.css");
Style.Include("orchard-mediaproviders-admin.css");
Style.Include("orchard-oembed-admin.css");
Style.Require("FontAwesome");
Style.Include("orchard-oembed-admin.css");
}
@Display.Metas()
@@ -24,9 +25,14 @@
<body>
<div id="oembed-main">
<div>
<div class="query-container">
@using (Html.BeginFormAntiForgeryPost()) {
<input id="query" name="url" type="text" class="large" autofocus placeholder="@T("media url")" value="@Model.Url"/>
<div id="icon">
<button type="submit" class="icon-download"></button>
</div>
<div id="query">
<input name="url" type="text" autofocus placeholder="@T("media url")" value="@Model.Url"/>
</div>
}
</div>

View File

@@ -9,6 +9,7 @@
Style.Include("orchard-mediaproviders-admin.css");
Style.Include("orchard-websearch-admin.css");
Style.Require("FontAwesome");
}
@Display.Metas()
@@ -22,7 +23,14 @@
<!-- Register for an API account on https://datamarket.azure.com/dataset/5BA839F1-12CE-4CCE-BF57-A49D98D29A44 -->
<form data-bind="submit: doSearch">
<input id="query" type="text" class="medium" autofocus placeholder="@T("search")"/>
<div class="query-container">
<div id="icon">
<button type="submit" class="icon-search"></button>
</div>
<div id="query">
<input type="text" autofocus placeholder="@T("search")"/>
</div>
</div>
</form>
<ul id="websearch-results" data-bind="foreach: results">
@@ -108,7 +116,7 @@
};
self.doSearch = function () {
var query = $('#query').val();
var query = $('#query > input').val();
var url = 'https://api.datamarket.azure.com/Bing/Search/Image?$format=json&Query=%27' + encodeURIComponent(query) + '%27';
$.ajax({