Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2025-11-11 08:25:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

icon mgmt for #2463

Browse Source
This commit is contained in:
Julian Lam
2015-01-01 16:24:47 -05:00
parent dfe8e8de70
commit 02e0d4635b
3 changed files with 65 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
public/src/admin/manage/category.js
View File

@@ -1,5 +1,5 @@
"use strict"; "use strict";
/*global define */ /*global define, app, socket, ajaxify, RELATIVE_PATH, bootbox */
define('admin/manage/category', [ define('admin/manage/category', [
'uploader', 'uploader',
@@ -11,10 +11,8 @@ define('admin/manage/category', [
Category.init = function() { Category.init = function() {
var modified_categories = {}; var modified_categories = {};
function modified(el, cid) { function modified(el) {
if (!cid) { var cid = $(el).parents('form').attr('data-cid');
cid = $(el).parents('form').attr('data-cid');
}
if (cid) { if (cid) {
modified_categories[cid] = modified_categories[cid] || {}; modified_categories[cid] = modified_categories[cid] || {};
@@ -115,13 +113,18 @@ define('admin/manage/category', [
uploader.open(RELATIVE_PATH + '/admin/category/uploadpicture', { cid: cid }, 0, function(imageUrlOnServer) { uploader.open(RELATIVE_PATH + '/admin/category/uploadpicture', { cid: cid }, 0, function(imageUrlOnServer) {
inputEl.val(imageUrlOnServer); inputEl.val(imageUrlOnServer);
var previewBox = inputEl.siblings('.category-preview'); var previewBox = inputEl.parent().siblings('.category-preview');
previewBox.css('background', 'url(' + imageUrlOnServer + '?' + new Date().getTime() + ')') previewBox.css('background', 'url(' + imageUrlOnServer + '?' + new Date().getTime() + ')')
.css('background-size', 'cover'); .css('background-size', 'cover');
modified(inputEl[0], cid); modified(inputEl[0]);
}); });
}); });
// Icon selection
$('.category-preview').on('click', function(ev) {
iconSelect.init($(this).find('i'), modified);
});
$(function() { $(function() {

3
public/src/admin/modules/iconSelect.js
View File

@@ -14,7 +14,7 @@ define(function() {
selected = 'fa-doesnt-exist'; selected = 'fa-doesnt-exist';
} }
if (selected) { if (selected) {
$('#icons .fa-icons .fa.' + selected).parent().addClass('selected'); $('#icons .fa-icons .fa.' + selected).addClass('selected');
} }
bootbox.confirm('<h2>Select an icon.</h2>' + $('#icons').html(), function(confirm) { bootbox.confirm('<h2>Select an icon.</h2>' + $('#icons').html(), function(confirm) {
@@ -29,6 +29,7 @@ define(function() {
el.val(categoryIconClass); el.val(categoryIconClass);
el.attr('value', categoryIconClass); el.attr('value', categoryIconClass);
console.log(el);
onModified(el); onModified(el);
} }
}); });

105
src/views/admin/manage/category.tpl
View File

@@ -1,21 +1,22 @@
<div class="row"> <div class="row">
<div class="col-md-9"> <form role="form" class="category" data-cid="{category.cid}">
<div class="panel panel-default"> <div class="col-md-9">
<div class="panel-heading"><i class="fa fa-folder"></i> Categories</div> <div class="panel panel-default">
<div class="panel-body"> <div class="panel-heading"><i class="fa fa-folder"></i> Categories</div>
<div class="pull-right text-right"> <div class="panel-body">
<div class="form-group"> <div class="pull-right text-right">
<div class="dropdown"> <div class="form-group">
<button type="button" class="btn btn-default" data-toggle="dropdown"><i class="fa fa-cogs"></i> Options</button> <div class="dropdown">
<ul class="dropdown-menu" role="menu"> <button type="button" class="btn btn-default" data-toggle="dropdown"><i class="fa fa-cogs"></i> Options</button>
<li class="permissions"><a href="#"><i class="fa fa-ban"></i> Access Control</a></li> <ul class="dropdown-menu" role="menu">
<hr /> <li class="permissions"><a href="#"><i class="fa fa-ban"></i> Access Control</a></li>
<hr />
</ul>
</ul>
</div>
</div> </div>
</div> </div>
</div>
<form role="form" class="category" data-cid="{category.cid}">
<h3 data-edit-target="#cid-{category.cid}-name"><span>{category.name}</span> <small><i class="fa fa-edit"></i></small></h3> <h3 data-edit-target="#cid-{category.cid}-name"><span>{category.name}</span> <small><i class="fa fa-edit"></i></small></h3>
<input id="cid-{category.cid}-name" type="text" class="form-control hide" placeholder="Category Name" data-name="name" value="{category.name}" /> <input id="cid-{category.cid}-name" type="text" class="form-control hide" placeholder="Category Name" data-name="name" value="{category.name}" />
<h4 data-edit-target="#cid-{category.cid}-description"><span>{category.description}</span> <small><i class="fa fa-edit"></i></small></h4> <h4 data-edit-target="#cid-{category.cid}-description"><span>{category.description}</span> <small><i class="fa fa-edit"></i></small></h4>
@@ -78,54 +79,54 @@
</div> </div>
</div> </div>
</fieldset> </fieldset>
</form> </div>
</div> </div>
</div> </div>
<!-- IMPORT admin/partials/categories/permissions.tpl --> <div class="col-md-3 options">
</div> <div class="panel panel-default hidden-sm">
<div class="panel-heading">Preview</div>
<div class="col-md-3 options"> <div class="panel-body">
<div class="panel panel-default hidden-sm"> <div class="category-preview" style="
<div class="panel-heading">Preview</div> <!-- IF category.backgroundImage -->background-image: url({category.backgroundImage});<!-- ENDIF category.backgroundImage -->
<div class="panel-body"> <!-- IF category.bgColor -->background-color: {category.bgColor};<!-- ENDIF category.bgColor -->
<div class="category-preview" style=" color: {category.color};
<!-- IF category.backgroundImage -->background-image: url({category.backgroundImage});<!-- ENDIF category.backgroundImage --> background-size:cover;
<!-- IF category.bgColor -->background-color: {category.bgColor};<!-- ENDIF category.bgColor --> ">
color: {category.color}; <div class="icon">
background-size:cover; <i data-name="icon" value="{category.icon}" class="fa {category.icon} fa-2x"></i>
"> </div>
<div class="icon"> </div>
<i data-name="icon" value="{category.icon}" class="fa {category.icon} fa-2x"></i> <div class="btn-group-vertical">
<button type="button" data-cid="{category.cid}" data-name="image" data-value="{category.image}" class="btn btn-default upload-button"><i class="fa fa-upload"></i> Upload Image</button>
<!-- IF category.image -->
<button class="btn btn-warning delete-image"><i data-name="icon" value="fa-times" class="fa fa-times"></i> Remove Image</button>
<!-- ENDIF category.image -->
</div> </div>
</div> </div>
<button type="button" data-cid="{category.cid}" data-name="image" data-value="{categories.image}" class="btn btn-default upload-button"><i class="fa fa-upload"></i> Upload Image</button>
<!-- IF categories.image -->
<small class="pointer delete-image"><i data-name="icon" value="fa-times" class="fa fa-times"></i></small>
<!-- ENDIF categories.image -->
</div> </div>
</div>
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading">Categories Control Panel</div> <div class="panel-heading">Categories Control Panel</div>
<div class="panel-body"> <div class="panel-body">
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-primary save">Save Changes</button> <button class="btn btn-primary save">Save Changes</button>
<button class="btn btn-default revert">Revert</button> <button class="btn btn-default revert">Revert</button>
</div>
<hr />
<button class="btn btn-danger purge"><i class="fa fa-eraser"></i> Purge Category</button>
</div> </div>
<hr />
<button class="btn btn-danger purge"><i class="fa fa-eraser"></i> Purge Category</button>
</div> </div>
</div> </div>
</div>
<!-- IMPORT admin/partials/categories/setParent.tpl --> <!-- IMPORT admin/partials/categories/setParent.tpl -->
<div id="icons" style="display:none;"> <div id="icons" style="display:none;">
<div class="icon-container"> <div class="icon-container">
<div class="row fa-icons"> <div class="row fa-icons">
<i class="fa fa-doesnt-exist"></i> <i class="fa fa-doesnt-exist"></i>
<!-- IMPORT admin/partials/fontawesome.tpl --> <!-- IMPORT admin/partials/fontawesome.tpl -->
</div>
</div> </div>
</div> </div>
</div> </form>
</div> </div>