ifhub/ifhub.club
1
0
Fork 0
mirror of https://github.com/Oreolek/ifhub.club.git synced 2024-05-08 03:48:22 +03:00
Code Issues Releases Wiki Activity

Шаблон Synio

Browse source
This commit is contained in:
Denis Shakhov 2016-09-18 23:37:14 +07:00
parent 5b2d765027
commit 436a23143d
31 changed files with 891 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
application/frontend/skin/synio/components/comment/comment.tpl
View file

@ -214,6 +214,7 @@
{if $useVote}
{* Блокируем голосование для гостей или если залогиненый пользователь является автором комментария*}
{component 'vote'
mods = 'small'
classes = "{$component}-vote js-comment-vote"
target = $comment
isLocked = ($oUserCurrent && $oUserCurrent->getId() == $user->getId()) || strtotime($comment->getDate()) < $smarty.now - Config::Get('acl.vote.comment.limit_time')}

16
application/frontend/skin/synio/components/tags-personal/css/tags-personal.css Normal file
View file

@ -0,0 +1,16 @@
.ls-tags-item.ls-tags-item--personal {
color: #139643;
}
.ls-tags-personal .ls-tags-item:last-child,
.ls-tags-item.ls-tags-item--last {
margin-right: 20px;
}
.ls-tags-item.ls-tags-personal-edit {
text-decoration: none;
color: #7b848d;
border-bottom: 1px dotted #7b848d;
}
.ls-tags-item.ls-tags-personal-edit:hover {
color: #333;
border-color: #333;
}

193
application/frontend/skin/synio/components/tags-personal/js/tags-personal.js Normal file
View file

@ -0,0 +1,193 @@
/**
* Персональные теги
*
* @module ls/tags-favourite
*
* @license GNU General Public License, version 2
* @copyright 2013 OOO "ЛС-СОФТ" {@link http://livestreetcms.com}
* @author Denis Shakhov <denis.shakhov@gmail.com>
*/
(function($) {
"use strict";
$.widget( "livestreet.lsTagsFavourite", $.livestreet.lsComponent, {
/**
* Дефолтные опции
*/
options: {
// Ссылки
urls: {
save: null
},
// Селекторы внешних элементов
extSelectors: {
// Общий блок для всех виджетов с формой редактирвоания
editBlock: '#favourite-form-tags',
// Форма редактирования
form: '#js-favourite-form',
// Кнопка отправки формы
formSubmitButton: '.js-tags-form-submit',
// Поле со списком тегов
formTags: '.js-tags-form-input-list'
},
// Селекторы
selectors: {
// Блок с персональными тегами
tags: '.js-tags-personal-tags',
// Персональный тег
tag: '.js-tags-personal-tag',
// Кнопка редактирвоания
edit: '.js-tags-personal-edit'
},
// Ajax параметры
params : {
target_type: null
},
// HTML
html: {
// Персональный тег
tag: function ( tag ) {
return '<a href="' + tag.url + '" rel="tag" class="ls-tags-item ls-tags-item--personal js-tags-personal-tag">' + tag.tag + '</a>';
}
}
},
/**
* Конструктор
*
* @constructor
* @private
*/
_create: function () {
this._super();
this.extElements = this._getElementsFromSelectors( this.options.extSelectors );
this._on( this.elements.edit, { click: '_onEditClick' });
this._on( this.extElements.form, { submit: '_onFormSubmit' });
},
/**
* Коллбэк вызываемый при клике по кнопке редактирования
*/
_onEditClick: function( event ) {
this.editShow();
event.preventDefault();
},
/**
* Коллбэк вызываемый при сабмите формы
*
* @param {Object} event
*/
_onFormSubmit: function( event ) {
// Для всех виджетов используется одна общая форма редактирования,
// поэтому убеждаемся что форма открыта именно для текущего виджета
if ( this.extElements.form.data( 'target_id' ) != this.option( 'params.target_id' ) ) return;
this._submit( 'save', this.extElements.form, '_onFormSubmitSuccess', {
submitButton: this.extElements.formSubmitButton
});
event.preventDefault();
},
/**
* Коллбэк вызываемый при успешной отправке формы
*
* @param {Object} response
*/
_onFormSubmitSuccess: function( response ) {
this.editHide();
this.setPersonalTags( response.tags );
},
/**
* Получает персональные теги (jQuery элементы)
*/
getPersonalTagsElements: function() {
return this.elements.tags.find( this.option( 'selectors.tag' ) );
},
/**
* Получает персональные теги
*/
getPersonalTags: function() {
return this.getPersonalTagsElements().map(function ( index, tag ) {
return this.getTagInfo( $( tag ) );
}.bind( this ));
},
/**
* Получает информацию о теге (урл и имя)
*
* @param {jQuery} tagElement Тег
* @return {Object} Тег
*/
getTagInfo: function( tagElement ) {
return {
tag: $.trim( tagElement.text() ),
url: tagElement.attr( 'href' )
};
},
/**
* Устанавливает персональные теги
*
* @param {Array} tags Список персональных тегов
*/
setPersonalTags: function( tags ) {
this.removePersonalTags();
this.elements.tags.html( $.map( tags, this.option( 'html.tag' ) ).join(', ') );
},
/**
* Удаляет персональные теги
*/
removePersonalTags: function() {
this.elements.tags.empty();
},
/**
* Отмечает виджет как (не)доступный для редактирования
*
* @param {Boolean} isEditable Доступен виджет для редактирования или нет
*/
setEditable: function( isEditable ) {
if ( isEditable ) {
this.elements.edit.show();
} else {
this.removePersonalTags();
this.elements.edit.hide();
}
},
/**
* Показывает блок редактирования
*/
editShow: function() {
this.extElements.form.data( 'target_id', this.option( 'params.target_id' ) );
this.extElements.formTags.val( this._tagsToString() );
this.extElements.editBlock.lsModal( 'show' );
},
/**
* Скрывает блок редактирования
*/
editHide: function() {
this.extElements.editBlock.lsModal( 'hide' );
},
/**
* Возвращает персональные теги в виде строки
*/
_tagsToString: function() {
return $.map( this.getPersonalTags(), function( tag ) { return tag.tag; } ).join( ', ' );
},
});
})(jQuery);

34
application/frontend/skin/synio/components/tags-personal/tags.tpl Normal file
View file

@ -0,0 +1,34 @@
{**
* Список тегов
*}
{extends 'component@tags.tags'}
{block 'tags_options' append}
{component_define_params params=[ 'targetId', 'tagsPersonal', 'isEditable' ]}
{$attributes = array_merge( $attributes|default:[], [
'data-param-target_id' => $targetId
])}
{/block}
{block 'tags_list' append}
{* Персональные теги *}
{if $oUserCurrent}
<span class="ls-tags-personal js-tags-personal-tags">
{foreach $tagsPersonal as $tag}
{component 'tags' template='item'
text=$tag->getText()
url=$tag->getUrl()
classes='js-tags-personal-tag'
mods="personal"
isLast=$tag@last}
{/foreach}
</span>
{* Кнопка "Изменить теги" *}
<a href="#" class="ls-tags-item ls-tags-personal-edit js-tags-personal-edit" {if $isEditable}style="display:none;"{/if}>
{lang 'tags_personal.edit'}
</a>
{/if}
{/block}

9
application/frontend/skin/synio/components/tags/css/tags-blocks.css Normal file
View file

@ -0,0 +1,9 @@
/**
* Теги
*
* @modifier tags
*/
.ls-block--tags .ls-tab-pane {
padding: 20px;
}

64
application/frontend/skin/synio/components/tags/css/tags.css Normal file
View file

@ -0,0 +1,64 @@
/**
* Заголовок
*/
.ls-tags-item.ls-tags-title {
float: none;
}
/**
* Список тегов
*/
.ls-tags {
padding-left: 20px;
position: relative;
margin: 0 0 10px;
color: #888;
font-size: 11px;
}
.ls-tags:before {
content: "";
position: absolute;
top: 6px;
left: 0;
width: 15px;
height: 7px;
background: url(../images/tags.png) no-repeat;
}
.ls-tags-item {
color: #4c4c4c;
text-decoration: underline;
}
.ls-tags-item:hover {
text-decoration: none;
}
/**
* Облако тегов
*/
.ls-tag-cloud {
width: 100%;
text-align: center;
}
.ls-tag-cloud-item {
display: inline;
margin-right: 5px;
line-height: 22px;
}
.ls-tag-cloud-item a {
color: #727a90;
text-decoration: underline;
}
.ls-tag-cloud-item.active a {
color: #3CA023;
}
.ls-tag-size-1 { font-size: 12px; }
.ls-tag-size-2 { font-size: 12px; }
.ls-tag-size-3 { font-size: 14px; }
.ls-tag-size-4 { font-size: 14px; }
.ls-tag-size-5 { font-size: 18px; }
.ls-tag-size-6 { font-size: 18px; }
.ls-tag-size-7 { font-size: 20px; }
.ls-tag-size-8 { font-size: 20px; }
.ls-tag-size-9 { font-size: 22px; }
.ls-tag-size-10 { font-size: 22px; }

BIN
application/frontend/skin/synio/components/tags/images/tags.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

19
application/frontend/skin/synio/components/tags/tags-item.tpl Normal file
View file

@ -0,0 +1,19 @@
{**
* Уведомления
*
* @param string $text
* @param string $url
*}
{* Название компонента *}
{$component = 'ls-tags-item'}
{component_define_params params=[ 'text', 'url', 'isFirst', 'isLast', 'mods', 'classes', 'attributes' ]}
{if $isLast}
{$mods = "$mods last"}
{/if}
{block 'tags_item_options'}{/block}
{* Уведомление *}
<a class="{$component} {cmods name=$component mods=$mods} {$classes}" href="{$url}" rel="tag">{$text|escape}</a>{if ! $isLast}, {/if}

24
application/frontend/skin/synio/components/tags/tags.tpl Normal file
View file

@ -0,0 +1,24 @@
{**
* Список тегов
*}
{$component = 'ls-tags'}
{component_define_params params=[ 'title', 'tags', 'mods', 'classes', 'attributes' ]}
{block 'tags_options'}{/block}
{if $tags}
<div class="{$component} {cmods name=$component mods=$mods} {$classes}" {cattr list=$attributes}>
{if $title}
<span class="{$component}-item {$component}-title">
{$title}
</span>
{/if}
{block 'tags_list'}
{foreach $tags as $tag}
{component 'tags' template='item' text=$tag->getText() url=$tag->getUrl() isFirst=$tag@first isLast=$tag@last}
{/foreach}
{/block}
</div>
{/if}

106
application/frontend/skin/synio/components/topic/css/topic.css
View file

@ -26,29 +26,39 @@
.ls-topic-header {
margin-bottom: 25px;
}
.ls-topic-header .ls-topic-title {
font: 400 32px/1.3em "Open Sans", sans-serif;
margin: 0 0 15px;
.ls-topic-title {
font-size: 27px;
line-height: 1.1em;
font-weight: normal;
margin: 0 0 10px;
}
.ls-topic-header .ls-topic-title a {
text-decoration: none;
.ls-topic-title:last-child {
margin-bottom: 0;
}
.ls-topic-header .ls-topic-title a:visited {
color: #000;
.ls-topic-title a {
text-decoration: underline;
color: #275ec2;
}
.ls-topic-header .ls-topic-title i {
.ls-topic-title a:hover {
color: #f00;
}
.ls-topic-title i {
position: relative;
top: 8px;
cursor: help;
}
.ls-topic-header .ls-topic-info {
color: #777;
margin-bottom: 15px;
overflow: hidden;
.ls-topic-blogs {
font-family: 'PT Sans', sans-serif;
font-size: 18px;
}
.ls-topic-header .ls-topic-info-item {
float: left;
margin-right: 15px;
.ls-topic-blogs a {
color: #000;
text-decoration: underline;
}
.ls-topic-blogs a:hover {
color: #666;
}
@ -69,9 +79,16 @@
/**
* Подвал
*/
.ls-topic-footer {
border-top: 1px solid #e7ebed;
padding-top: 11px;
font-size: 11px;
color: #7b848d;
}
.ls-topic-footer .ls-topic-info-item {
float: left;
padding: 8px;
height: 22px;
line-height: 22px;
margin-right: 20px;
}
.ls-topic-info a {
@ -82,35 +99,50 @@
}
/* Автор */
.ls-topic-info-item.ls-topic-info-item--author {
padding: 0;
}
.ls-topic-info-item .ls-avatar .ls-avatar-image {
width: 36px;
height: 36px;
border-radius: 50%;
}
.ls-topic-info-item .ls-avatar .ls-avatar-name-link {
color: #333;
.ls-topic-info-item.ls-topic-info-item--author .ls-avatar {
position: relative;
top: -2px;
}
/* Ссылка на комментарии */
.ls-topic-info-item.ls-topic-info-item--comments a span {
color: #777;
.ls-topic-info-item.ls-topic-info-item--comments a {
text-decoration: none;
}
.ls-topic-info-item--comments-count:before {
margin-right: 7px;
display: inline-block;
content: "";
width: 11px;
height: 11px;
background: url(../images/comments.png) no-repeat;
position: relative;
top: 2px;
}
.ls-topic-info-item--comments-count {
text-decoration: underline;
}
.ls-topic-info-item--comments:hover .ls-topic-info-item--comments-count {
}
.ls-topic-info-item--comments--has-new .ls-topic-info-item--comments-count {
color: #000;
}
.ls-topic-info-item--comments--has-new .ls-topic-info-item--comments-count:before {
background-image: url(../images/comments-active.png);
}
.ls-topic-info-item--comments-new {
color: #27a736;
text-decoration: none;
}
/* Голосование */
.ls-topic-info-item.ls-topic-info-item--vote {
margin: 0;
padding: 0;
}
/**
* Responsive styles
*/
@media (max-width: 480px) {
.ls-topic-header .ls-topic-title {
font-size: 24px;
}
float: right;
}
/**

BIN
application/frontend/skin/synio/components/topic/images/comments-active.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
application/frontend/skin/synio/components/topic/images/comments.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

224
application/frontend/skin/synio/components/topic/topic.tpl Normal file
View file

@ -0,0 +1,224 @@
{**
* Базовый шаблон топика
* Используется также для отображения превью топика
*
* @param object $topic
* @param boolean $isList
* @param boolean $isPreview
*}
{$component = 'ls-topic'}
{component_define_params params=[ 'type', 'topic', 'isPreview', 'isList', 'mods', 'classes', 'attributes' ]}
{$user = $topic->getUser()}
{$type = ($topic->getType()) ? $topic->getType() : $type}
{if ! $isList}
{$mods = "{$mods} single"}
{/if}
{$classes = "{$classes} topic js-topic"}
{block 'topic_options'}{/block}
<article class="{$component} {cmods name=$component mods=$mods} {$classes}" {cattr list=$attributes}>
{**
* Хидер
*}
<header class="{$component}-header">
{* Заголовок *}
<h1 class="{$component}-title ls-word-wrap">
{block 'topic_title'}
{if $topic->getPublish() == 0}
{component 'icon' icon='file' attributes=[ title => {lang 'topic.is_draft'} ]}
{/if}
{if $isList}
<a href="{$topic->getUrl()}">{$topic->getTitle()|escape}</a>
{else}
{$topic->getTitle()|escape}
{/if}
{/block}
</h1>
{* Блоги *}
{$_blogs = []}
{if ! $isPreview}
{foreach $topic->getBlogs() as $blog}
{if $blog->getType() != 'personal'}
{$_blogs[] = [ title => $blog->getTitle()|escape, url => $blog->getUrlFull() ]}
{/if}
{/foreach}
{/if}
{if $_blogs}
<ul class="{$component}-blogs">
{foreach $_blogs as $blog}
<a href="{$blog.url}">{$blog.title}</a>{if ! $blog@last}, {/if}
{/foreach}
</ul>
{/if}
</header>
{* Управление *}
{if $topic->getIsAllowAction() && ! $isPreview}
{block 'topic_header_actions'}
{$items = [
[ 'icon' => 'edit', 'url' => $topic->getUrlEdit(), 'text' => $aLang.common.edit, 'show' => $topic->getIsAllowEdit() ],
[ 'icon' => 'trash', 'url' => "{$topic->getUrlDelete()}?security_ls_key={$LIVESTREET_SECURITY_KEY}", 'text' => $aLang.common.remove, 'show' => $topic->getIsAllowDelete(), 'classes' => 'js-confirm-remove-default' ]
]}
{/block}
{component 'actionbar' items=[[ 'buttons' => $items ]]}
{/if}
{**
* Текст
*}
{block 'topic_body'}
{* Превью *}
{$previewImage = $topic->getPreviewImageWebPath(Config::Get('module.topic.default_preview_size'))}
{if $previewImage}
<div class="ls-topic-preview-image">
<img src="{$previewImage}" />
</div>
{/if}
<div class="{$component}-content">
<div class="{$component}-text ls-text">
{block 'topic_content_text'}
{if $isList and $topic->getTextShort()}
{$topic->getTextShort()}
{else}
{$topic->getText()}
{/if}
{/block}
</div>
{* Кат *}
{if $isList && $topic->getTextShort()}
{component 'button'
classes = "{$component}-cut"
url = "{$topic->getUrl()}#cut"
text = "{$topic->getCutText()|default:$aLang.topic.read_more}"}
{/if}
</div>
{* Дополнительные поля *}
{block 'topic_content_properties'}
{if ! $isList}
{component 'property' template='output.list' properties=$topic->property->getPropertyList()}
{/if}
{/block}
{* Опросы *}
{block 'topic_content_polls'}
{if ! $isList}
{component 'poll' template='list' polls=$topic->getPolls()}
{/if}
{/block}
{/block}
{**
* Футер
*}
{block 'topic_footer'}
{if $topic->getTypeObject()->getParam('allow_tags')}
{$favourite = $topic->getFavourite()}
{if ! $isPreview}
{component 'tags-personal'
classes = 'js-tags-favourite'
tags = $topic->getTagsObjects()
tagsPersonal = ( $favourite ) ? $favourite->getTagsObjects() : []
isEditable = ! $favourite
targetType = 'topic'
targetId = $topic->getId()}
{/if}
{/if}
<footer class="{$component}-footer">
{* Информация *}
{block 'topic_footer_info'}
<ul class="{$component}-info ls-clearfix">
{block 'topic_footer_info_items'}
{* Голосование *}
{if ! $isPreview}
<li class="{$component}-info-item {$component}-info-item--vote">
{$isExpired = strtotime($topic->getDatePublish()) < $smarty.now - Config::Get('acl.vote.topic.limit_time')}
{component 'vote'
target = $topic
classes = 'js-vote-topic'
useAbstain = true
isLocked = ( $oUserCurrent && $topic->getUserId() == $oUserCurrent->getId() ) || $isExpired
showRating = $topic->getVote() || ($oUserCurrent && $topic->getUserId() == $oUserCurrent->getId()) || $isExpired}
</li>
{/if}
{* Автор топика *}
<li class="{$component}-info-item {$component}-info-item--author">
{component 'user' template='avatar' user=$user size='text' mods='inline'}
</li>
{* Дата *}
<li class="{$component}-info-item {$component}-info-item--date">
<time datetime="{date_format date=$topic->getDatePublish() format='c'}" title="{date_format date=$topic->getDatePublish() format='j F Y, H:i'}">
{date_format date=$topic->getDatePublish() format="j F Y, H:i"}
</time>
</li>
{if ! $isPreview}
{* Избранное *}
<li class="{$component}-info-item {$component}-info-item--favourite">
{component 'favourite' classes="js-favourite-topic" target=$topic attributes=[ 'data-param-target_type' => $type ]}
</li>
{* Поделиться *}
<li class="{$component}-info-item {$component}-info-item--share">
{component 'icon' icon='share'
classes="js-popover-default"
attributes=[
'title' => {lang 'topic.share'},
'data-tooltip-target' => "#topic_share_{$topic->getId()}"
]}
</li>
{/if}
{* Ссылка на комментарии *}
{* Не показываем если комментирование запрещено и кол-во комментариев равно нулю *}
{$_countCommentNew = $topic->getCountCommentNew()}
{if $isList && ( ! $topic->getForbidComment() || ( $topic->getForbidComment() && $topic->getCountComment() ) )}
<li class="{$component}-info-item {$component}-info-item--comments {if $_countCommentNew}{$component}-info-item--comments--has-new{/if}">
<a href="{$topic->getUrl()}#comments">
<span class="{$component}-info-item--comments-count">{$topic->getCountComment()}</span>
{if $_countCommentNew}
<span class="{$component}-info-item--comments-new">+{$_countCommentNew}</span>
{/if}
</a>
</li>
{/if}
{/block} {* /topic_footer_info_items *}
</ul>
{/block} {* /topic_footer_info *}
</footer>
{* Всплывающий блок появляющийся при нажатии на кнопку Поделиться *}
{if ! $isList && ! $isPreview}
<div class="ls-tooltip" id="topic_share_{$topic->getId()}">
<div class="ls-tooltip-content js-ls-tooltip-content">
{hookb run="topic_share" topic=$topic isList=$isList}
<div class="yashare-auto-init" data-yashareTitle="{$topic->getTitle()|escape}" data-yashareLink="{$topic->getUrl()}" data-yashareL10n="ru" data-yashareType="small" data-yashareTheme="counter" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,gplus"></div>
{/hookb}
</div>
</div>
{/if}
{/block} {* /topic_footer *}
</article>

235
application/frontend/skin/synio/components/vote/css/vote.css
View file

@ -6,14 +6,153 @@
* @author Denis Shakhov <denis.shakhov@gmail.com>
*/
.ls-vote--default {
overflow: hidden;
cursor: pointer;
border-radius: 50px;
display: inline-block;
font-size: 11px;
line-height: 22px;
border: 1px solid transparent;
}
.ls-vote--default.ls-vote--not-voted:not(.ls-vote--locked) {
border-color: #dfe3e8;
}
.ls-vote--default .ls-vote-rating {
display: none;
}
.ls-vote--default.ls-vote--locked .ls-vote-rating,
.ls-vote--default.ls-vote--voted .ls-vote-rating {
display: block;
}
.ls-vote--default .ls-vote-rating,
.ls-vote--default .ls-vote-item {
float: left;
width: 22px;
height: 22px;
text-align: center;
}
.ls-vote--default .ls-vote-item {
padding: 0 5px;
background: #fbfbfc;
background: -moz-linear-gradient(top, #fbfbfc 0%, #f0f2f5 100%);
background: -webkit-linear-gradient(top, #fbfbfc 0%,#f0f2f5 100%);
background: linear-gradient(top, #fbfbfc 0%,#f0f2f5 100%);
}
.ls-vote--default .ls-vote-rating {
width: auto;
padding: 0 0 0 10px;
}
/* Icon */
.ls-vote--default .ls-vote-item:before {
content: "";
width: 16px;
height: 14px;
margin-top: 4px;
display: inline-block;
background-repeat: no-repeat;
}
.ls-vote--default .ls-vote-item-up:before { background-image: url(../images/vote-default-up.png); }
.ls-vote--default .ls-vote-item-down:before { background-image: url(../images/vote-default-down.png); }
.ls-vote--default .ls-vote-item-abstain:before { background-image: url(../images/vote-default-abstain.png); }
/* Hover */
.ls-vote--default .ls-vote-item-abstain:hover:before {
background-image: url(../images/vote-default-abstain-hover.png);
}
.ls-vote--default .ls-vote-item-abstain:hover {
background: #4ec4ff;
background: -moz-linear-gradient(top, #4ec4ff 0%, #22b3fe 100%);
background: -webkit-linear-gradient(top, #4ec4ff 0%,#22b3fe 100%);
background: linear-gradient(top, #4ec4ff 0%,#22b3fe 100%);
}
.ls-vote--default .ls-vote-item-up:hover:before {
background-image: url(../images/vote-default-up-positive.png);
}
.ls-vote--default .ls-vote-item-up:hover {
background: #e4fae2;
background: -moz-linear-gradient(top, #e4fae2 0%, #b0e3ac 100%);
background: -webkit-linear-gradient(top, #e4fae2 0%,#b0e3ac 100%);
background: linear-gradient(top, #e4fae2 0%,#b0e3ac 100%);
}
.ls-vote--default .ls-vote-item-down:hover:before {
background-image: url(../images/vote-default-down-negative.png);
}
.ls-vote--default .ls-vote-item-down:hover {
background: #ffc8c8;
background: -moz-linear-gradient(top, #ffc8c8 0%, #ff8181 100%);
background: -webkit-linear-gradient(top, #ffc8c8 0%,#ff8181 100%);
background: linear-gradient(top, #ffc8c8 0%,#ff8181 100%);
}
/* Locked */
.ls-vote--default.ls-vote--locked .ls-vote-item {
display: none;
}
.ls-vote--default.ls-vote--locked:not(.ls-vote--voted) .ls-vote-rating {
padding-right: 10px;
}
/* Voted */
.ls-vote--default.ls-vote--locked,
.ls-vote--default.ls-vote--voted {
box-shadow: 0 2px 3px rgba(0,0,0,.2) inset;
}
.ls-vote--default.ls-vote--voted .ls-vote-item {
background: none;
display: none;
}
/* Positive */
.ls-vote--default.ls-vote--locked.ls-vote--count-positive,
.ls-vote--default.ls-vote--voted.ls-vote--count-positive { background: #def7dc; }
.ls-vote--default.ls-vote--count-positive .ls-vote-rating { color: #5fa459; }
/* Negative */
.ls-vote--default.ls-vote--locked.ls-vote--count-negative,
.ls-vote--default.ls-vote--voted.ls-vote--count-negative { background: #ff8a8a; }
.ls-vote--default.ls-vote--count-negative .ls-vote-rating { color: #da4242; }
/* Zero */
.ls-vote--default.ls-vote--locked.ls-vote--count-zero,
.ls-vote--default.ls-vote--voted.ls-vote--count-zero { background: #edf8fd; }
.ls-vote--default.ls-vote--count-zero .ls-vote-rating { color: #628fa5; }
/* Up */
.ls-vote--default.ls-vote--voted.ls-vote--voted-up .ls-vote-item-up { display: block; }
.ls-vote--default.ls-vote--voted.ls-vote--voted-up.ls-vote--count-positive .ls-vote-item-up:before { background-image: url(../images/vote-default-up-positive.png); }
.ls-vote--default.ls-vote--voted.ls-vote--voted-up.ls-vote--count-negative .ls-vote-item-up:before { background-image: url(../images/vote-default-up-negative.png); }
.ls-vote--default.ls-vote--voted.ls-vote--voted-up.ls-vote--count-zero .ls-vote-item-up:before { background-image: url(../images/vote-default-up.png); }
/* Down */
.ls-vote--default.ls-vote--voted.ls-vote--voted-down .ls-vote-item-down { display: block; }
.ls-vote--default.ls-vote--voted.ls-vote--voted-down.ls-vote--count-positive .ls-vote-item-down:before { background-image: url(../images/vote-default-down-positive.png); }
.ls-vote--default.ls-vote--voted.ls-vote--voted-down.ls-vote--count-negative .ls-vote-item-down:before { background-image: url(../images/vote-default-down-negative.png); }
.ls-vote--default.ls-vote--voted.ls-vote--voted-down.ls-vote--count-zero .ls-vote-item-down:before { background-image: url(../images/vote-default-down.png); }
/* Abstain */
.ls-vote--default.ls-vote--voted.ls-vote--voted-abstain .ls-vote-item-abstain { display: block; }
.ls-vote--default.ls-vote--voted.ls-vote--voted-abstain.ls-vote--count-positive .ls-vote-item-abstain:before { background-image: url(../images/vote-default-abstain-positive.png); }
.ls-vote--default.ls-vote--voted.ls-vote--voted-abstain.ls-vote--count-negative .ls-vote-item-abstain:before { background-image: url(../images/vote-default-abstain-negative.png); }
.ls-vote--default.ls-vote--voted.ls-vote--voted-abstain.ls-vote--count-zero .ls-vote-item-abstain:before { background-image: url(../images/vote-default-abstain.png); }
/**
* Small
*/
/* Body */
.ls-vote-body {
.ls-vote--small .ls-vote-body {
position: relative;
padding-right: 55px;
}
/* Vote Item */
.ls-vote-item {
.ls-vote--small .ls-vote-item {
width: 20px;
height: 20px;
cursor: pointer;
@ -23,92 +162,66 @@
transition: background .2s;
}
.ls-vote-item-up {
.ls-vote--small .ls-vote-item-up {
right: 0;
background-image: url(../images/vote-small-up.png);
}
.ls-vote-item-down {
.ls-vote--small .ls-vote-item-down {
right: 25px;
background-image: url(../images/vote-small-down.png);
}
.ls-vote-item-up:hover { background-image: url(../images/vote-small-up-hover.png); }
.ls-vote-item-down:hover { background-image: url(../images/vote-small-down-hover.png); }
.ls-vote--small .ls-vote-item-up:hover { background-image: url(../images/vote-small-up-hover.png); }
.ls-vote--small .ls-vote-item-down:hover { background-image: url(../images/vote-small-down-hover.png); }
/* Rating */
.ls-vote-rating { font-weight: bold; color: #aaa; font-size: 11px; }
.ls-vote--small .ls-vote-rating { font-weight: bold; color: #aaa; font-size: 11px; }
.ls-vote--count-positive .ls-vote-rating { color: #51983c; }
.ls-vote--count-negative .ls-vote-rating { color: #da4242; }
.ls-vote--small.ls-vote--count-positive .ls-vote-rating { color: #51983c; }
.ls-vote--small.ls-vote--count-negative .ls-vote-rating { color: #da4242; }
/* Voted */
.ls-vote--voted .ls-vote-body { padding-right: 30px; }
.ls-vote--small.ls-vote--voted .ls-vote-body { padding-right: 30px; }
.ls-vote--voted .ls-vote-item {
.ls-vote--small.ls-vote--voted .ls-vote-item {
right: 0;
}
.ls-vote--voted .ls-vote-item:hover {
.ls-vote--small.ls-vote--voted .ls-vote-item:hover {
cursor: default;
}
.ls-vote--voted .ls-vote-item-up { background-image: url(../images/vote-small-up-active.png); }
.ls-vote--voted .ls-vote-item-down { background-image: url(../images/vote-small-down-active.png); }
.ls-vote--small.ls-vote--voted .ls-vote-item-up { background-image: url(../images/vote-small-up-active.png); }
.ls-vote--small.ls-vote--voted .ls-vote-item-down { background-image: url(../images/vote-small-down-active.png); }
.ls-vote--voted.ls-vote--voted-zero .ls-vote-item-down,
.ls-vote--voted.ls-vote--voted-zero .ls-vote-item-up,
.ls-vote--small.ls-vote--voted.ls-vote--voted-zero .ls-vote-item-down,
.ls-vote--small.ls-vote--voted.ls-vote--voted-zero .ls-vote-item-up,
.ls-vote--voted.ls-vote--voted-up .ls-vote-item-down,
.ls-vote--voted.ls-vote--voted-up .ls-vote-item-abstain,
.ls-vote--small.ls-vote--voted.ls-vote--voted-up .ls-vote-item-down,
.ls-vote--small.ls-vote--voted.ls-vote--voted-up .ls-vote-item-abstain,
.ls-vote--voted.ls-vote--voted-down .ls-vote-item-up,
.ls-vote--voted.ls-vote--voted-down .ls-vote-item-abstain { display: none; }
.ls-vote--small.ls-vote--voted.ls-vote--voted-down .ls-vote-item-up,
.ls-vote--small.ls-vote--voted.ls-vote--voted-down .ls-vote-item-abstain { display: none; }
/* Locked */
.ls-vote--locked .ls-vote-body {
.ls-vote--small.ls-vote--locked .ls-vote-body {
padding-right: 0;
}
.ls-vote--locked .ls-vote-item {
.ls-vote--small.ls-vote--locked .ls-vote-item {
display: none;
}
/**
* Large (User, Blog)
* Info
*/
.ls-vote--large .ls-vote-heading {
text-transform: uppercase;
text-align: right;
font-size: 11px;
.ls-vote-info-item:not(:last-child) {
margin-bottom: 5px;
font-family: Arial;
color: #aaa;
}
.ls-vote--large .ls-vote-rating { font: 300 30px/1em 'Open Sans'; text-align: right; }
.ls-vote--large .ls-vote-item-up,
.ls-vote--large .ls-vote-item-down { top: 7px; }
.ls-vote--large.ls-vote--count-positive .ls-vote-rating { color: #333; }
/**
* Small (Topic)
*/
.ls-vote--small { border-radius: 3px; overflow: hidden; position: relative; }
/* Body */
.ls-vote--small .ls-vote-body { padding: 0; }
/* Кнопки голосования */
.ls-vote--small .ls-vote-item { opacity: 1; filter: alpha(opacity=100); position: static; }
.ls-vote--small .ls-vote-item,
.ls-vote--small .ls-vote-rating { float: left; background: #ac90df; padding: 8px 13px; }
.ls-vote--small .ls-vote-item i { opacity: 1; }
.ls-vote--small .ls-vote-item:hover { opacity: .9; filter: alpha(opacity=90); }
/* Рейтинг */
.ls-vote--small .ls-vote-rating { color: #fff; display: none; }
.ls-vote--small.ls-vote--voted .ls-vote-rating { display: block; }
.ls-vote--small.ls-vote--count-negative .ls-vote-item,
.ls-vote--small.ls-vote--count-negative .ls-vote-rating { background: #da3a3a; }
/* Заблокированное */
.ls-vote--small.ls-vote--locked .ls-vote-rating { display: block; }
.ls-vote-info-item:before {
display: inline-block;
content: "";
width: 16px;
height: 14px;
vertical-align: middle;
margin-right: 10px;
}
.ls-vote-info-item--up:before { background-image: url(../images/info-up.png); }
.ls-vote-info-item--down:before { background-image: url(../images/info-down.png); }
.ls-vote-info-item--abstain:before { background-image: url(../images/info-abstain.png); }

40
application/frontend/skin/synio/components/vote/docs/guide.tpl Normal file
View file

@ -0,0 +1,40 @@
<table class="ls-table">
<tbody>
{foreach [ true, false ] as $locked}
{foreach [ true, false ] as $isVoted}
{foreach [ 0, 1, -1 ] as $direction}
{foreach [ 0, 99, -99 ] as $rating}
<tr>
<td width="200">
{($locked) ? 'locked' : ''}
{($isVoted) ? 'voted' : ''}
{if $isVoted}
{if $direction == 0}
d:zero
{elseif $direction > 0}
d:up
{else}
d:down
{/if}
{/if}
{if $rating == 0}
r:zero
{elseif $rating > 0}
r:positive
{else}
r:negative
{/if}
</td>
<td>
{component 'vote' targetId=1 useAbstain=true isVoted=$isVoted rating=$rating direction=$direction isLocked=$locked}
</td>
</tr>
{/foreach}
{/foreach}
{/foreach}
{/foreach}
</tbody>
</table>

BIN
application/frontend/skin/synio/components/vote/images/info-abstain.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
application/frontend/skin/synio/components/vote/images/info-down.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1,003 B

BIN
application/frontend/skin/synio/components/vote/images/info-up.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
application/frontend/skin/synio/components/vote/images/vote-default-abstain-hover.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
application/frontend/skin/synio/components/vote/images/vote-default-abstain-negative.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
application/frontend/skin/synio/components/vote/images/vote-default-abstain-positive.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
application/frontend/skin/synio/components/vote/images/vote-default-abstain.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
application/frontend/skin/synio/components/vote/images/vote-default-down-negative.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 995 B

BIN
application/frontend/skin/synio/components/vote/images/vote-default-down-positive.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 989 B

BIN
application/frontend/skin/synio/components/vote/images/vote-default-down.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 977 B

BIN
application/frontend/skin/synio/components/vote/images/vote-default-up-negative.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

BIN
application/frontend/skin/synio/components/vote/images/vote-default-up-positive.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
application/frontend/skin/synio/components/vote/images/vote-default-up.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 990 B

2
application/frontend/skin/synio/components/vote/js/vote.js
View file

@ -43,7 +43,7 @@
// Не понравилось
voted_down: 'ls-vote--voted-down',
// Воздержался
voted_zero: 'ls-vote--voted-zero',
voted_zero: 'ls-vote--voted-abstain',
// Рейтинг больше нуля
count_positive: 'ls-vote--count-positive',

7
application/frontend/skin/synio/components/vote/vote.info.tpl
View file

@ -8,10 +8,9 @@
{component_define_params params=[ 'target' ]}
<ul class="{$component}">
<li>{component 'icon' icon='plus' mods='white'} {$target->getCountVoteUp()}</li>
<li>{component 'icon' icon='minus' mods='white'} {$target->getCountVoteDown()}</li>
<li>{component 'icon' icon='eye' mods='white'} {$target->getCountVoteAbstain()}</li>
<li>{component 'icon' icon='asterisk' mods='white'} {$target->getCountVote()}</li>
<li class="{$component}-item {$component}-item--up">{$target->getCountVoteUp()}</li>
<li class="{$component}-item {$component}-item--down">{$target->getCountVoteDown()}</li>
<li class="{$component}-item {$component}-item--abstain">{$target->getCountVoteAbstain()}</li>
{hook run='topic_show_vote_stats' topic=$target}
</ul>

33
application/frontend/skin/synio/components/vote/vote.tpl
View file

@ -11,11 +11,17 @@
{$component = 'ls-vote'}
{component_define_params params=[ 'showRating', 'target', 'isLocked', 'useAbstain', 'mods', 'classes', 'attributes' ]}
{* Параметры для тестирования *}
{component_define_params params=[ 'isVoted', 'targetId', 'rating', 'direction' ]}
{* Установка дефолтных значений *}
{$showRating = $showRating|default:true}
{* Рейтинг *}
{$rating = $target->getRating()}
{$rating = $rating|default:$target->getRating()}
{$_direction = $direction|default:$target->getDirection()}
{$_id = $targetId|default:$target->getId()}
{$_isVoted = $isVoted|default:$target->getVote()}
{* Получаем модификаторы *}
{if $showRating}
@ -28,15 +34,15 @@
{/if}
{/if}
{if $vote = $target->getVote()}
{if $_isVoted}
{$mods = "$mods voted"}
{if $vote->getDirection() > 0}
{if $_direction > 0}
{$mods = "$mods voted-up"}
{elseif $vote->getDirection() < 0}
{elseif $_direction < 0}
{$mods = "$mods voted-down"}
{else}
{$mods = "$mods voted-zero"}
{$mods = "$mods voted-abstain"}
{/if}
{else}
{$mods = "$mods not-voted"}
@ -50,12 +56,13 @@
{$mods = "$mods rating-hidden"}
{/if}
{* Дополнительный мод-ор для иконок *}
{$iconMod = ( in_array( 'small', explode(' ', $mods) ) ) ? 'white' : ''}
{if ! in_array( 'small', explode(' ', $mods) )}
{$mods = "$mods default"}
{/if}
{block 'vote_options'}{/block}
<div class="{$component} {cmods name=$component mods=$mods} {$classes}" {cattr list=$attributes} data-param-i-target-id="{$target->getId()}">
<div class="{$component} {cmods name=$component mods=$mods} {$classes}" {cattr list=$attributes} data-param-i-target-id="{$_id}">
{* Основной блок *}
<div class="{$component}-body">
{block 'vote_body'}
@ -68,16 +75,16 @@
{/if}
</div>
{* Нравится *}
<div class="{$component}-item {$component}-item-up js-vote-item" {if ! $_isVoted}title="{$aLang.$component.up}"{/if} data-vote-value="1"></div>
{* Воздержаться *}
{if $useAbstain}
<div class="{$component}-item {$component}-item-abstain js-vote-item" {if ! $vote}title="{$aLang.$component.abstain}"{/if} data-vote-value="0"></div>
<div class="{$component}-item {$component}-item-abstain js-vote-item" {if ! $_isVoted}title="{$aLang.$component.abstain}"{/if} data-vote-value="0"></div>
{/if}
{* Нравится *}
<div class="{$component}-item {$component}-item-up js-vote-item" {if ! $vote}title="{$aLang.$component.up}"{/if} data-vote-value="1"></div>
{* Не нравится *}
<div class="{$component}-item {$component}-item-down js-vote-item" {if ! $vote}title="{$aLang.$component.down}"{/if} data-vote-value="-1"></div>
<div class="{$component}-item {$component}-item-down js-vote-item" {if ! $_isVoted}title="{$aLang.$component.down}"{/if} data-vote-value="-1"></div>
{/block}
</div>
</div>