Change UI in action/edit screen to more easily handle custom classes
This commit is contained in:
Zachary Doll
parent
ad0ffdb76a
commit
23983f7060
BIN
design/images/action-sprites-bordered.png
Normal file
BIN
design/images/action-sprites-bordered.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
design/images/action-sprites-white.png
Normal file
BIN
design/images/action-sprites-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 16 KiB |
@ -1,7 +1,3 @@
|
||||
#icon-preview {
|
||||
margin: auto 20px;
|
||||
}
|
||||
|
||||
.Reactions {
|
||||
position: relative;
|
||||
font-size: 11px;
|
||||
@ -425,86 +421,86 @@ input + .ReactSprite {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ReactHappy { background-position: -6px -6px; }
|
||||
.ReactHappy2 { background-position: -30px -6px; }
|
||||
.ReactSmiley { background-position: -48px 0; }
|
||||
.ReactSmiley2 { background-position: -72px 0; }
|
||||
.ReactTongue { background-position: -96px 0; }
|
||||
.ReactTongue2 { background-position: -120px 0; }
|
||||
.ReactSad { background-position: -144px 0; }
|
||||
.ReactSad2 { background-position: -168px 0; }
|
||||
.ReactHappy { background-position: -4px -4px; }
|
||||
.ReactHappy2 { background-position: -28px -4px; }
|
||||
.ReactSmiley { background-position: -52px -4px; }
|
||||
.ReactSmiley2 { background-position: -76px -4px; }
|
||||
.ReactTongue { background-position: -100px -4px; }
|
||||
.ReactTongue2 { background-position: -124px -4px; }
|
||||
.ReactSad { background-position: -148px -4px; }
|
||||
.ReactSad2 { background-position: -172px -4px; }
|
||||
.ReactWink { background-position: -196px -5px; }
|
||||
.ReactWink2 { background-position: -216px 0; }
|
||||
.ReactGrin { background-position: -240px 0; }
|
||||
.ReactShocked { background-position: -264px 0; }
|
||||
.ReactConfused { background-position: -288px 0; }
|
||||
.ReactConfused2 { background-position: -312px 0; }
|
||||
.ReactNeutral { background-position: -336px 0; }
|
||||
.ReactNeutral2 { background-position: -360px 0; }
|
||||
.ReactWondering { background-position: 0 -24px; }
|
||||
.ReactWondering2 { background-position: -24px -24px; }
|
||||
.ReactPointUp { background-position: -48px -24px; }
|
||||
.ReactPointRight { background-position: -72px -24px; }
|
||||
.ReactPointDown { background-position: -96px -24px; }
|
||||
.ReactPointLeft { background-position: -120px -24px; }
|
||||
.ReactThumbsUp { background-position: -144px -24px; }
|
||||
.ReactThumbsUp2 { background-position: -168px -24px; }
|
||||
.ReactShocked2 { background-position: -192px -24px; }
|
||||
.ReactEvil { background-position: -216px -24px; }
|
||||
.ReactEvil2 { background-position: -240px -24px; }
|
||||
.ReactAngry { background-position: -264px -24px; }
|
||||
.ReactAngry2 { background-position: -288px -24px; }
|
||||
.ReactHeart { background-position: -312px -24px; }
|
||||
.ReactHeart2 { background-position: -336px -24px; }
|
||||
.ReactHeartBroken { background-position: -360px -24px; }
|
||||
.ReactStar { background-position: 0 -48px; }
|
||||
.ReactStar2 { background-position: -24px -48px; }
|
||||
.ReactGrin2 { background-position: -48px -48px; }
|
||||
.ReactCool { background-position: -72px -48px; }
|
||||
.ReactCool2 { background-position: -96px -48px; }
|
||||
.ReactQuestion { background-position: -120px -48px; }
|
||||
.ReactNotification { background-position: -144px -48px; }
|
||||
.ReactWarning { background-position: -168px -48px; }
|
||||
.ReactSpam { background-position: -192px -48px; }
|
||||
.ReactBlocked { background-position: -216px -48px; }
|
||||
.ReactEye { background-position: -240px -48px; }
|
||||
.ReactEye2 { background-position: -264px -48px; }
|
||||
.ReactEyeBlocked { background-position: -288px -48px; }
|
||||
.ReactFlag { background-position: -312px -48px; }
|
||||
.ReactBrightnessMedium { background-position: -336px -48px; }
|
||||
.ReactQuotesLeft { background-position: -360px -48px; }
|
||||
.ReactMusic { background-position: 0 -72px; }
|
||||
.ReactPacman { background-position: -24px -72px; }
|
||||
.ReactBullhorn { background-position: -48px -72px; }
|
||||
.ReactRocket { background-position: -72px -72px; }
|
||||
.ReactFire { background-position: -96px -72px; }
|
||||
.ReactHammer { background-position: -120px -72px; }
|
||||
.ReactTarget { background-position: -144px -72px; }
|
||||
.ReactLightning { background-position: -168px -72px; }
|
||||
.ReactShield { background-position: -192px -72px; }
|
||||
.ReactCheckmarkCircle { background-position: -216px -72px; }
|
||||
.ReactLab { background-position: -240px -72px; }
|
||||
.ReactLeaf { background-position: -264px -72px; }
|
||||
.ReactDashboard { background-position: -288px -72px; }
|
||||
.ReactDroplet { background-position: -312px -72px; }
|
||||
.ReactFeed { background-position: -336px -72px; }
|
||||
.ReactSupport { background-position: -360px -72px; }
|
||||
.ReactHammer2 { background-position: 0 -96px; }
|
||||
.ReactWand { background-position: -24px -96px; }
|
||||
.ReactCog { background-position: -48px -96px; }
|
||||
.ReactGift { background-position: -72px -96px; }
|
||||
.ReactTrophy { background-position: -96px -96px; }
|
||||
.ReactMagnet { background-position: -120px -96px; }
|
||||
.ReactSwitch { background-position: -144px -96px; }
|
||||
.ReactGlobe { background-position: -168px -96px; }
|
||||
.ReactBookmark { background-position: -192px -96px; }
|
||||
.ReactBookmarks { background-position: -216px -96px; }
|
||||
.ReactStar3 { background-position: -240px -96px; }
|
||||
.ReactInfo { background-position: -264px -96px; }
|
||||
.ReactInfo2 { background-position: -288px -96px; }
|
||||
.ReactCancelCircle { background-position: -312px -96px; }
|
||||
.ReactCheckmark { background-position: -336px -96px; }
|
||||
.ReactClose { background-position: -360px -96px; }
|
||||
.ReactWink2 { background-position: -220px -4px; }
|
||||
.ReactGrin { background-position: -244px -4px; }
|
||||
.ReactShocked { background-position: -268px -4px; }
|
||||
.ReactConfused { background-position: -292px -4px; }
|
||||
.ReactConfused2 { background-position: -316px -4px; }
|
||||
.ReactNeutral { background-position: -340px -4px; }
|
||||
.ReactNeutral2 { background-position: -364px -4px; }
|
||||
.ReactWondering { background-position: -4px -28px; }
|
||||
.ReactWondering2 { background-position: -28px -28px; }
|
||||
.ReactPointUp { background-position: -52px -28px; }
|
||||
.ReactPointRight { background-position: -76px -28px; }
|
||||
.ReactPointDown { background-position: -100px -28px; }
|
||||
.ReactPointLeft { background-position: -124px -28px; }
|
||||
.ReactThumbsUp { background-position: -148px -28px; }
|
||||
.ReactThumbsUp2 { background-position: -172px -28px; }
|
||||
.ReactShocked2 { background-position: -196px -28px; }
|
||||
.ReactEvil { background-position: -220px -28px; }
|
||||
.ReactEvil2 { background-position: -244px -28px; }
|
||||
.ReactAngry { background-position: -268px -28px; }
|
||||
.ReactAngry2 { background-position: -292px -28px; }
|
||||
.ReactHeart { background-position: -316px -28px; }
|
||||
.ReactHeart2 { background-position: -340px -28px; }
|
||||
.ReactHeartBroken { background-position: -364px -28px; }
|
||||
.ReactStar { background-position: -4px -52px; }
|
||||
.ReactStar2 { background-position: -28px -52px; }
|
||||
.ReactGrin2 { background-position: -52px -52px; }
|
||||
.ReactCool { background-position: -76px -52px; }
|
||||
.ReactCool2 { background-position: -100px -52px; }
|
||||
.ReactQuestion { background-position: -124px -52px; }
|
||||
.ReactNotification { background-position: -148px -52px; }
|
||||
.ReactWarning { background-position: -172px -52px; }
|
||||
.ReactSpam { background-position: -196px -52px; }
|
||||
.ReactBlocked { background-position: -220px -52px; }
|
||||
.ReactEye { background-position: -244px -52px; }
|
||||
.ReactEye2 { background-position: -268px -52px; }
|
||||
.ReactEyeBlocked { background-position: -292px -52px; }
|
||||
.ReactFlag { background-position: -316px -52px; }
|
||||
.ReactBrightnessMedium { background-position: -340px -52px; }
|
||||
.ReactQuotesLeft { background-position: -364px -52px; }
|
||||
.ReactMusic { background-position: -4px -76px; }
|
||||
.ReactPacman { background-position: -28px -76px; }
|
||||
.ReactBullhorn { background-position: -52px -76px; }
|
||||
.ReactRocket { background-position: -76px -76px; }
|
||||
.ReactFire { background-position: -100px -76px; }
|
||||
.ReactHammer { background-position: -124px -76px; }
|
||||
.ReactTarget { background-position: -148px -76px; }
|
||||
.ReactLightning { background-position: -172px -76px; }
|
||||
.ReactShield { background-position: -196px -76px; }
|
||||
.ReactCheckmarkCircle { background-position: -220px -76px; }
|
||||
.ReactLab { background-position: -244px -76px; }
|
||||
.ReactLeaf { background-position: -268px -76px; }
|
||||
.ReactDashboard { background-position: -292px -76px; }
|
||||
.ReactDroplet { background-position: -316px -76px; }
|
||||
.ReactFeed { background-position: -340px -76px; }
|
||||
.ReactSupport { background-position: -364px -76px; }
|
||||
.ReactHammer2 { background-position: -4px -100px; }
|
||||
.ReactWand { background-position: -28px -100px; }
|
||||
.ReactCog { background-position: -52px -100px; }
|
||||
.ReactGift { background-position: -76px -100px; }
|
||||
.ReactTrophy { background-position: -100px -100px; }
|
||||
.ReactMagnet { background-position: -124px -100px; }
|
||||
.ReactSwitch { background-position: -148px -100px; }
|
||||
.ReactGlobe { background-position: -172px -100px; }
|
||||
.ReactBookmark { background-position: -196px -100px; }
|
||||
.ReactBookmarks { background-position: -220px -100px; }
|
||||
.ReactStar3 { background-position: -244px -100px; }
|
||||
.ReactInfo { background-position: -268px -100px; }
|
||||
.ReactInfo2 { background-position: -292px -100px; }
|
||||
.ReactCancelCircle { background-position: -316px -100px; }
|
||||
.ReactCheckmark { background-position: -340px -100px; }
|
||||
.ReactClose { background-position: -364px -100px; }
|
||||
|
||||
/* Switch to the white icons when hovering over a menuitem sprite */
|
||||
.MenuItems a:hover .ReactSprite,
|
||||
@ -518,4 +514,13 @@ input + .ReactSprite {
|
||||
.ActionBlock {
|
||||
margin: 15px 0 5px;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
#ActionIcons {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
#ActionIcons img {
|
||||
padding: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -1,9 +1,27 @@
|
||||
/* Copyright 2013 Zachary Doll */
|
||||
jQuery(document).ready(function($) {
|
||||
|
||||
// Update preview icon for reactions on admin page
|
||||
$(document).on('change', 'select', function(){
|
||||
$('#icon-preview').removeClass().addClass($('select').val() + ' ReactSprite');
|
||||
// find the existing class to select
|
||||
// var CurrentCssClass = $("input[name='CssClass']").val();
|
||||
//
|
||||
// if(CurrentCssClass.length) {
|
||||
// $("#ActionIcons img[data-class='" + CurrentCssClass + "']").addClass('Selected');
|
||||
// }
|
||||
|
||||
// If someone types in the class manually, deselect icons and select if needed
|
||||
$(document).on('input', "input[name='CssClass']", function() {
|
||||
$('#ActionIcons img.Selected').removeClass('Selected');
|
||||
|
||||
var FindCssClass = $(this).val();
|
||||
if(FindCssClass.length) {
|
||||
$("#ActionIcons img[data-class='" + CurrentCssClass + "']").addClass('Selected');
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('click', '#ActionIcons img', function() {
|
||||
var newCssClass = 'React' + $(this).attr('title');
|
||||
$("input[name='CssClass']").val(newCssClass);
|
||||
$('#ActionIcons img.Selected').removeClass('Selected');
|
||||
$(this).addClass('Selected');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
@ -7,6 +7,8 @@ else {
|
||||
echo Wrap(T('Add Action'), 'h1');
|
||||
}
|
||||
|
||||
$OriginalCssClass = $this->Form->GetValue('CssClass');
|
||||
|
||||
echo $this->Form->Open(array('class' => 'Action'));
|
||||
echo $this->Form->Errors();
|
||||
?>
|
||||
@ -19,10 +21,22 @@ echo $this->Form->Errors();
|
||||
</li>
|
||||
<li>
|
||||
<?php
|
||||
// TODO: Bundle and icon spritesheet for 2.0
|
||||
echo $this->Form->Label('CSS Icon', 'CssClass');
|
||||
echo $this->Form->Label('CSS Class', 'CssClass');
|
||||
echo $this->Form->TextBox('CssClass');
|
||||
echo Wrap(' ', 'span', array('class' => 'ReactSprite ' . $this->Form->GetValue('CssClass'), 'id' => 'icon-preview'));
|
||||
?>
|
||||
</li>
|
||||
<li id="ActionIcons">
|
||||
<?php
|
||||
$Icons = array('Happy', 'Happy2', 'Smiley', 'Smiley2', 'Tongue', 'Tongue2', 'Sad', 'Sad2', 'Wink', 'Wink2', 'Grin', 'Shocked', 'Confused', 'Confused2', 'Neutral', 'Neutral2', 'Wondering', 'Wondering2', 'PointUp', 'PointRight', 'PointDown', 'PointLeft', 'ThumbsUp', 'ThumbsUp2', 'Shocked2', 'Evil', 'Evil2', 'Angry', 'Angry2', 'Heart', 'Heart2', 'HeartBroken', 'Star', 'Star2', 'Grin2', 'Cool', 'Cool2', 'Question', 'Notification', 'Warning', 'Spam', 'Blocked', 'Eye', 'Eye2', 'EyeBlocked', 'Flag', 'BrightnessMedium', 'QuotesLeft', 'Music', 'Pacman', 'Bullhorn', 'Rocket', 'Fire', 'Hammer', 'Target', 'Lightning', 'Shield', 'CheckmarkCircle', 'Lab', 'Leaf', 'Dashboard', 'Droplet', 'Feed', 'Support', 'Hammer2', 'Wand', 'Cog', 'Gift', 'Trophy', 'Magnet', 'Switch', 'Globe', 'Bookmark', 'Bookmarks', 'Star3', 'Info', 'Info2', 'CancelCircle', 'Checkmark', 'Close');
|
||||
foreach($Icons as $Icon) {
|
||||
$Class = 'React' . $Icon;
|
||||
$Selected = '';
|
||||
if($OriginalCssClass == $Class) {
|
||||
$Selected = 'Selected';
|
||||
}
|
||||
echo Img('applications' . DS . 'yaga' . DS . 'design' . DS . DS . 'images' . DS . 'action-icons' . DS . $Icon . '.png',
|
||||
array('title' => $Icon, 'data-class' => $Class, 'class' => $Selected));
|
||||
}
|
||||
?>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user