Skip to content

Commit

Permalink
2.1 beta new reaction image system (Emoji & SVG support)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bleistivt
bleistivt committed Jan 25, 2021
1 parent a78389e commit ce23d11
Show file tree
Hide file tree
Showing 12 changed files with 201 additions and 147 deletions.
2 changes: 1 addition & 1 deletion addon.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "Yet Another Gamification Application",
"description": "Yaga provides customizable reactions, badges, and ranks for your Vanilla forum software. Increase user activity by letting users react to content with emotions. Give users badges based on statistics and engagement in your community. Create and award custom badges for special events and recognition. Award Ranks which can confer different (configurable) permissions based on community perception and participation.",
"version": "2.0.2",
"version": "2.1.0b",
"url": "http://github.com/bleistivt/yaga",
"license": "GPLv2",
"mobileFriendly": true,
Expand Down
170 changes: 87 additions & 83 deletions controllers/class.actioncontroller.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,92 @@ class ActionController extends DashboardController {
*/
public $Uses = ['Form', 'ActionModel'];

/**
* @var array This is just a list of all the images in the action icons folder.
*/
public static $icons = [
'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'
];

/**
* Make this look like a dashboard page and add the resources
*
Expand Down Expand Up @@ -70,89 +156,7 @@ public function edit($actionID = null) {
$this->title(Gdn::translate('Yaga.Action.Edit'));
}

// This is just a list of all the images in the action icons folder
$this->setData('Icons', [
'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'
]);
$this->setData('Icons', self::$icons);

// Load up all permissions
$permissions = Gdn::permissionModel()->permissionColumns();
Expand Down
56 changes: 36 additions & 20 deletions design/reactions.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,20 @@
margin-right: 3px;
}

.UserReactionWrap .ReactSprite {
.UserReactionWrap .PhotoWrapSmall {
height: 24px;
width: 24px;
}

.UserReactionWrap .YagaReactSprite,
.UserReactionWrap .YagaReactPhoto,
.UserReactionWrap .YagaReactEmoji {
position: absolute;
right: -2px;
bottom: -2px;
}

.UserReactionWrap .YagaReactSprite {
background-image: url('images/action-sprites-bordered.png');
}

Expand Down Expand Up @@ -80,13 +90,14 @@
}

.Reactions .Count {
font-size: 8px;
background: #555;
color: white;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
margin-right: 4px;
vertical-align: top;
padding: 1px 0.8ex;
}
.Item .Reactions > * {
visibility: hidden;
Expand All @@ -100,7 +111,9 @@
visibility: visible;
}

.Reactions > a.React > .ReactSprite {
.Reactions > a.React > .YagaReactSprite,
.Reactions > a.React > .YagaReactPhoto,
.Reactions > a.React > .YagaReactEmoji {
margin-right: 2px;
}

Expand All @@ -110,22 +123,27 @@ only screen and (max-device-width: 480px) {
.Item .Reactions > * { visibility: visible; }
}

/* Override default reactsprite styles from style.css to work with custom sheets */
.ReactSprite {
.YagaReactSprite, .YagaReactPhoto, .YagaReactEmoji {
display: inline-block;
width: 16px;
height: 16px;
margin-right: 4px;
line-height: 18px;
font-size: 16px;
vertical-align: bottom;
background-image: url('images/action-sprites.png')!important;
}

.YagaReactPhoto > .YagaReactionImage {
max-width: 16px;
max-height: 16px;
}

.YagaReactSprite {
background-image: url('images/action-sprites.png');
background-position: 16px 16px;
background-repeat: no-repeat;
}
.ReactButton.Quote .ReactSprite.ReactQuote {
background-image: none!important;
}
input + .ReactSprite {

input + .YagaReactSprite {
vertical-align: middle;
}

Expand Down Expand Up @@ -210,18 +228,16 @@ input + .ReactSprite {
.ReactCheckmark { background-position: -340px -100px; }
.ReactClose { background-position: -364px -100px; }

/* Share icons need to be specified here to undo the override */
.ReactFacebook { background-position: -29px -124px; }
.ReactTwitter { background-position: -53px -124px; }
.ReactGooglePlus { background-position: -77px -124px; }

.ReactSprite.ReactFacebook, .ReactSprite.ReactTwitter, .ReactSprite.ReactGooglePlus {
background-image: url('../../dashboard/design/images/sprites-14-000000.png');
.MenuItems a:hover .YagaReactSprite {
background-image: url('images/action-sprites-white.png');
}

#ActionIcons {
margin-top: 10px;
}

.MenuItems a:hover .ReactSprite {
background-image: url('images/action-sprites-white.png');
#ActionIcons img.Selected {
background: rgba(0, 0, 0, .15);
}

#Content .BoxFilter.BoxBestFilter {
Expand Down
10 changes: 2 additions & 8 deletions js/admin.actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,24 +29,18 @@ jQuery(document).ready(function ($) {
});

var formSetup = function () {
// Hide the advanced settings
$('#AdvancedActionSettings').children('div').hide();
$('#AdvancedActionSettings span').click(function () {
$(this).siblings().slideToggle();
});

// If someone types in the class manually, deselect icons and select if needed
$("input[name='CssClass']").on('input', function () {
$('#ActionIcons img.Selected').removeClass('Selected');

var FindCssClass = $(this).val();
if (FindCssClass.length) {
$("#ActionIcons img[data-class='" + CurrentCssClass + "']").addClass('Selected');
$("#ActionIcons img[data-class='" + FindCssClass + "']").addClass('Selected');
}
});

$('#ActionIcons img').click(function () {
var newCssClass = 'React' + $(this).attr('title');
var newCssClass = $(this).data('class');
$("input[name='CssClass']").val(newCssClass);
$('#ActionIcons img.Selected').removeClass('Selected');
$(this).addClass('Selected');
Expand Down
31 changes: 28 additions & 3 deletions library/functions.render.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ function renderReactionList($id, $type) {
if (checkPermission($action->Permission)) {
$countString = ($showCount && $action->Count) ? $action->Count : '';
$actionsString .= anchor(
wrap(' ', 'span', ['class' => 'ReactSprite React-'.$action->ActionID.' '.$action->CssClass]) .
wrapIf($countString, 'span', ['class' => 'Count']) .
renderYagaActionIcon($action, 'React').
wrapIf($countString, 'span', ['class' => 'Count']).
wrap($action->Name, 'span', ['class' => 'ReactLabel']), 'react/'.$type.'/'.$id.'/'.$action->ActionID,
[
'class' => 'Hijack ReactButton',
Expand Down Expand Up @@ -73,7 +73,7 @@ function renderReactionRecord($id, $type) {
$dateFormatter->formatDate($reaction->DateInserted, false, '%B %e, %Y')
);
$string = userPhoto($user, ['Size' => 'Small', 'title' => $dateTitle]);
$string .= '<span class="ReactSprite Reaction-'.$reaction->ActionID.' '.$reaction->CssClass.'"></span>';
$string .= renderYagaActionIcon($reaction, 'React');
$wrapttributes = ['class' => 'UserReactionWrap', 'data-userid' => $user->UserID, 'title' => $dateTitle];
$recordsString .= wrap($string, 'span', $wrapttributes);
}
Expand All @@ -88,6 +88,31 @@ function renderReactionRecord($id, $type) {

}

if (!function_exists('renderYagaActionIcon')) {

/**
* Renders an action icon which may be an image or an emoji.
*
* @since 2.1
* @param object $url The action.
* @param string $id The class determining the display type (button vs avatar).
*/
function renderYagaActionIcon($action, $class) {
$content = '';
$type = 'YagaReactSprite';

if ($action->Photo) {
$content = img($action->Photo, ['class' => 'YagaReactionImage']);
$type = 'YagaReactPhoto';
} elseif ($action->Emoji) {
$content = $action->Emoji;
$type = 'YagaReactEmoji';
}

return wrap($content, 'span', ['class' => $type.' '.$class.'-'.$action->ActionID.' '.$action->CssClass]);
}
}

if (!function_exists('renderYagaToggle')) {

/**
Expand Down
5 changes: 5 additions & 0 deletions locale/de.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,11 @@
$Definition['Yaga.Action.PermDesc'] = 'Ein Benutzer wird folgende Berechtigungen benötigen um diese Reaktion zu verwenden. Die Standard-Berechtigung heißt "Yaga.Reactions.Add".';
$Definition['Yaga.ActionUpdated'] = 'Die Reaktion wurde erfolgreich geändert!';
$Definition['Yaga.Action.PhotoDeleted'] = 'Reaktions-Foto entfernt';
$Definition['Yaga.Action.IconHelpTitle'] = 'Auf der Suche nach Icons?';
$Definition['Yaga.Action.IconHelpContent'] = 'Wenn du keine eigenen Icons oder Emoji verwenden möchtest, kannst du auch eines der von YAGA mitgelieferten Icons verwenden. Durch Klicken auf eines der folgenden Icons wird die dazugehörige CSS-Klasse eingefügt. Du musst keine Bilder hochladen!';
$Definition['Yaga.Action.PhotoDesc'] = 'Hier kann ein Bild für diese Reaktion hinzugefügt werden. Die Grafik sollte mindestens 16 mal 16 Pixel groß sein. Für die optimale Darstellung auf allen Geräten wird eine Größe von 48 mal 48 Pixeln empfohlen. SVG kann verwendet werden.';
$Definition['Yaga.Action.EmojiDesc'] = 'Wenn du anstatt eines Bildes lieber ein Emoji als Reaktionssymbol verwenden möchtest, kann dieses hier eingefügt werden (z.B. "😂"). Ansonsten kannst du das Feld freilassen.';
$Definition['Yaga.Action.CssDesc'] = 'Dieses Feld kann verwendet werden, wenn der Reaktionsstil per CSS definiert werden soll.';
$Definition['Yaga.Actions.Current'] = 'Aktivierte Reaktionen';
$Definition['Yaga.Actions.Desc'] = 'Reaktionen werden unter benutzergenerierten Inhalten wie Diskussionen, Kommentare und Aktivitäten angezeigt. Benutzer können pro Beitrag je eine Reaktion auswählen. Der ursprüngliche Verfasser erhält hierfür Punkte. Dies erzeugt eine positive Rückkopplung für positive <em>und</em> negative Reaktionen.';
$Definition['Yaga.Actions.Manage'] = 'Reaktionen bearbeiten';
Expand Down
Loading

0 comments on commit ce23d11

Please sign in to comment.