Improved ImageWidget for spaces

This commit is contained in:
andystrobel 2015-11-06 17:07:05 +01:00
parent f91e83d469
commit f919bca885
14 changed files with 1240 additions and 220 deletions

View File

@ -6,21 +6,27 @@
<img class="media-object img-rounded pull-left" data-src="holder.js/32x32" alt="32x32"
style="width: 32px; height: 32px;"
src="<?php echo $originator->getProfileImage()->getUrl(); ?>">
<?php endif; ?>
<?php endif; ?>
<!-- Show space image, if you are outside from a space -->
<?php if (!Yii::$app->controller instanceof \humhub\modules\content\components\ContentContainerController && $record->content->space !== null): ?>
<?php echo \humhub\modules\space\widgets\SpaceImage::widget(['space' => $record->content->space, 'width' => 20, 'height' => 20, 'cssAcronymClass' => 'stream img-space pull-left', 'cssImageClass' => 'img-space pull-left']); ?>
<?php endif; ?>
<?php echo \humhub\modules\space\widgets\Image::widget([
'space' => $record->content->space,
'width' => 20,
'htmlOptions' => [
'class' => 'img-space pull-left',
]
]); ?>
<?php endif; ?>
<div class="media-body">
<!-- Show content -->
<?php echo $content; ?><br />
<?php echo $content; ?><br/>
<!-- show time -->
<?php echo \humhub\widgets\TimeAgo::widget(['timestamp' => $record->content->created_at]); ?>
</div>
</div>
</li>
<?php if ($clickable): ?></a><?php endif; ?>
<?php if ($clickable): ?></a><?php endif; ?>

View File

@ -33,15 +33,21 @@ $container = $object->content->container;
<!-- Show space image, if you are outside from a space -->
<?php if (!Yii::$app->controller instanceof ContentContainerController && $object->content->container instanceof Space): ?>
<a href="<?php echo $object->content->container->getUrl(); ?>"
class="pull-left">
<?php echo \humhub\modules\space\widgets\SpaceImage::widget(['space' => $object->content->container, 'width' => 20, 'height' => 20, 'cssAcronymClass' => 'stream img-space', 'cssImageClass' => 'img-space']); ?>
</a>
<?php echo \humhub\modules\space\widgets\Image::widget([
'space' => $object->content->container,
'width' => 20,
'htmlOptions' => [
'class' => 'img-space',
],
'link' => 'true',
'linkOptions' => [
'class' => 'pull-left',
],
]); ?>
<?php endif; ?>
<div class="media-body">
<!-- show username with link and creation time-->
@ -58,7 +64,7 @@ $container = $object->content->container;
<?php if (!Yii::$app->controller instanceof ContentContainerController && $container instanceof Space): ?>
<?php echo Yii::t('ContentModule.views_wallLayout', 'in'); ?> <strong><a
href="<?php echo $container->getUrl(); ?>"><?php echo Html::encode($container->name); ?></a></strong>&nbsp;
<?php endif; ?>
<?php endif; ?>
<?php echo \humhub\modules\content\widgets\WallEntryLabels::widget(['object' => $object]); ?>

View File

@ -2,6 +2,7 @@
use yii\helpers\Html;
use yii\helpers\Url;
?>
<div class="panel panel-default">
@ -47,21 +48,31 @@ use yii\helpers\Url;
echo Html::a(Yii::t('DirectoryModule.views_directory_members', 'Follow'), 'javascript:setFollow("' . $space->createUrl('/space/space/follow') . '", "' . $space->id . '")', array('class' => 'btn btn-info btn-sm ' . (($followed) ? 'hide' : ''), 'id' => 'button_follow_' . $space->id));
echo Html::a(Yii::t('DirectoryModule.views_directory_members', 'Unfollow'), 'javascript:setUnfollow("' . $space->createUrl('/space/space/unfollow') . '", "' . $space->id . '")', array('class' => 'btn btn-primary btn-sm ' . (($followed) ? '' : 'hide'), 'id' => 'button_unfollow_' . $space->id));
}
?>
?>
</div>
<a href="<?php echo $space->getUrl(); ?>" class="pull-left">
<?php echo \humhub\modules\space\widgets\SpaceImage::widget(['space' => $space, 'width' => 50, 'height' => 50, 'cssAcronymClass' => 'directory-spaces']); ?>
</a>
<?php echo \humhub\modules\space\widgets\Image::widget([
'space' => $space,
'width' => 50,
'htmlOptions' => [
'class' => 'media-object',
],
'link' => 'true',
'linkOptions' => [
'class' => 'pull-left',
],
]); ?>
<?php if ($space->isMember()) { ?>
<i class="fa fa-user space-member-sign tt" data-toggle="tooltip" data-placement="top"
title=""
data-original-title="<?php echo Yii::t('DirectoryModule.views_directory_spaces', 'You are a member of this space'); ?>"></i>
<?php } ?>
<?php } ?>
<div class="media-body">
<h4 class="media-heading"><a href="<?php echo $space->getUrl(); ?>"><?php echo Html::encode($space->name); ?></a></h4>
<h4 class="media-heading"><a
href="<?php echo $space->getUrl(); ?>"><?php echo Html::encode($space->name); ?></a>
</h4>
<h5><?php echo Html::encode(humhub\libs\Helpers::truncateText($space->description, 100)); ?></h5>
<?php $tag_count = 0; ?>
@ -98,7 +109,8 @@ use yii\helpers\Url;
'success': function () {
$("#button_follow_" + id).addClass('hide');
$("#button_unfollow_" + id).removeClass('hide');
}});
}
});
}
// ajax request to unfollow the user
@ -109,7 +121,8 @@ use yii\helpers\Url;
'success': function () {
$("#button_follow_" + id).removeClass('hide');
$("#button_unfollow_" + id).addClass('hide');
}});
}
});
}
</script>

View File

@ -13,10 +13,17 @@ use yii\helpers\Html;
</div>
<div class="panel-body">
<?php foreach ($newSpaces as $space) : ?>
<a href="<?php echo $space->getUrl(); ?>" class="tt" data-toggle="tooltip" data-placement="top" title=""
data-original-title="<?php echo Html::encode($space->name); ?>">
<?php echo \humhub\modules\space\widgets\SpaceImage::widget(['space' => $space, 'width' => 40, 'height' => 40, 'cssAcronymClass' => 'new-spaces', 'cssImageClass' => 'img_margin']); ?>
</a>
<?php echo \humhub\modules\space\widgets\Image::widget([
'space' => $space,
'width' => 40,
'link' => true,
'linkOptions' => [
'class' => 'tt',
'data-toggle' => 'tooltip',
'data-placement' => 'top',
'title' => Html::encode($space->name),
]
]); ?>
<?php endforeach; ?>
<?php if ($showMoreButton): ?>

View File

@ -0,0 +1,125 @@
<?php
/**
* @link https://www.humhub.org/
* @copyright Copyright (c) 2015 HumHub GmbH & Co. KG
* @license https://www.humhub.com/licences
*/
namespace humhub\modules\space\widgets;
use \yii\base\Widget;
use yii\bootstrap\Html;
/**
* Return space image or acronym
*/
class Image extends Widget
{
/**
* @var \humhub\modules\space\models\Space
*/
public $space;
public $acronymCount = 2;
public $width;
public $height;
public $htmlOptions = [];
public $link = false;
public $linkOptions = [];
/**
* @inheritdoc
*/
public function run()
{
if (!$this->height) {
$this->height = $this->width;
}
$this->linkOptions['href'] = $this->space->getUrl();
if ($this->space->color != null) {
$color = Html::encode($this->space->color);;
} else {
$color = '#d7d7d7';
}
if (!isset($this->htmlOptions['class'])) {
$this->htmlOptions['class'] = "";
}
if (!isset($this->htmlOptions['style'])) {
$this->htmlOptions['style'] = "";
}
$acronymHtmlOptions = $this->htmlOptions;
$imageHtmlOptions = $this->htmlOptions;
$acronymHtmlOptions['class'] .= " space-profile-acronym-" . $this->space->id . " space-acronym";
$acronymHtmlOptions['style'] .= " background-color: ".$color."; width: ".$this->width."px; height: ".$this->height."px;";
$acronymHtmlOptions['style'] .= " ". $this->getDynamicStyles($this->width);
$imageHtmlOptions['class'] .= " space-profile-image-". $this->space->id." img-rounded profile-user-photo";
$imageHtmlOptions['style'] .= " width: ".$this->width."px; height: ".$this->height."px";
$imageHtmlOptions['alt'] = Html::encode($this->space->name);
$defaultImage = (basename($this->space->getProfileImage()->getUrl()) == 'default_space.jpg' || basename($this->space->getProfileImage()->getUrl()) == 'default_space.jpg?cacheId=0') ? true : false;
if (!$defaultImage) {
$acronymHtmlOptions['class'] .= " hidden";
} else {
$imageHtmlOptions['class'] .= " hidden";
}
return $this->render('image', [
'space' => $this->space,
'acronym' => $this->getAcronym(),
'link' => $this->link,
'linkOptions' => $this->linkOptions,
'acronymHtmlOptions' => $acronymHtmlOptions,
'imageHtmlOptions' => $imageHtmlOptions,
]);
}
protected function getAcronym()
{
$words = explode(" ", strtoupper($this->space->name));
$acronym = "";
foreach ($words as $w) {
$acronym .= $w[0];
}
$acronym = substr($acronym, 0, $this->acronymCount);
return $acronym;
}
protected function getDynamicStyles($elementWidth)
{
$fontSize = 44 * $elementWidth / 100;
$padding = 18 * $elementWidth / 100;
$borderRadius = 4;
if ($elementWidth < 140 && $elementWidth > 40) {
$borderRadius = 3;
}
if ($elementWidth < 35) {
$borderRadius = 2;
}
return "font-size: " . $fontSize . "px; padding: " . $padding . "px 0; border-radius: " . $borderRadius . "px";
}
}
?>

View File

@ -1,61 +0,0 @@
<?php
/**
* @link https://www.humhub.org/
* @copyright Copyright (c) 2015 HumHub GmbH & Co. KG
* @license https://www.humhub.com/licences
*/
namespace humhub\modules\space\widgets;
use \yii\base\Widget;
/**
* Return space image or acronym
*/
class SpaceImage extends Widget
{
/**
* @var \humhub\modules\space\models\Space
*/
public $space;
public $acronymCount = 2;
public $width = 140;
public $height = 140;
public $cssImageClass = "";
public $cssAcronymClass = "profile-image";
/**
* @inheritdoc
*/
public function run()
{
return $this->render('spaceImage', [
'space' => $this->space,
'acronym' => $this->getAcronym(),
'width' => $this->width,
'height' => $this->height,
'cssImageClass' => $this->cssImageClass,
'cssAcronymClass' => $this->cssAcronymClass,
]);
}
protected function getAcronym()
{
$words = explode(" ", strtoupper($this->space->name));
$acronym = "";
foreach ($words as $w) {
$acronym .= $w[0];
}
$acronym = substr ($acronym , 0, $this->acronymCount);
return $acronym;
}
}
?>

View File

@ -113,12 +113,14 @@ if ($space->isAdmin()) {
<!-- profile image output-->
<a data-toggle="lightbox" data-gallery="" href="<?php echo $profileImageOrig; ?>#.jpeg"
data-footer='<button type="button" class="btn btn-primary" data-dismiss="modal"><?php echo Yii::t('SpaceModule.widgets_views_profileHeader', 'Close'); ?></button>'>
<?php echo \humhub\modules\space\widgets\SpaceImage::widget(['space' => $space]); ?>
<?php echo \humhub\modules\space\widgets\Image::widget(['space' => $space, 'width' => 140]); ?>
</a>
<?php } else { ?>
<?php echo \humhub\modules\space\widgets\SpaceImage::widget(['space' => $space]); ?>
<?php echo \humhub\modules\space\widgets\Image::widget(['space' => $space, 'width' => 140]); ?>
<?php } ?>

View File

@ -0,0 +1,24 @@
<?php
use yii\bootstrap\Html;
?>
<?php if ($link == true) : ?>
<?php echo Html::beginTag('a', $linkOptions); ?>
<?php endif; ?>
<?php
echo Html::beginTag('div', $acronymHtmlOptions);
echo $acronym;
echo Html::endTag('div');
?>
<?php
echo Html::img($space->getProfileImage()->getUrl(), $imageHtmlOptions);
?>
<?php if ($link == true) : ?>
<?php echo Html::endTag('a'); ?>
<?php endif; ?>

View File

@ -14,7 +14,13 @@ $this->registerJsVar('scSpaceListUrl', Url::to(['/space/list', 'ajax' => 1]));
<a href="#" id="space-menu" class="dropdown-toggle" data-toggle="dropdown">
<!-- start: Show space image and name if chosen -->
<?php if ($currentSpace) { ?>
<?php echo \humhub\modules\space\widgets\SpaceImage::widget(['space' => $currentSpace, 'width' => 32, 'height' => 32, 'cssAcronymClass' => 'chooser-current-space', 'cssImageClass' => 'current-space-image']); ?>
<?php echo \humhub\modules\space\widgets\Image::widget([
'space' => $currentSpace,
'width' => 32,
'htmlOptions' => [
'class' => 'current-space-image',
]
]); ?>
<?php } ?>
<?php
@ -46,7 +52,13 @@ $this->registerJsVar('scSpaceListUrl', Url::to(['/space/list', 'ajax' => 1]));
<a href="<?php echo $membership->space->getUrl(); ?>">
<div class="media">
<!-- Show space image -->
<?php echo \humhub\modules\space\widgets\SpaceImage::widget(['space' => $membership->space, 'width' => 24, 'height' => 24, 'cssAcronymClass' => 'chooser pull-left', 'cssImageClass' => 'pull-left']); ?>
<?php echo \humhub\modules\space\widgets\Image::widget([
'space' => $membership->space,
'width' => 24,
'htmlOptions' => [
'class' => 'pull-left',
]
]); ?>
<div class="media-body">
<strong><?php echo Html::encode($membership->space->name); ?></strong>
<?php if ($newItems != 0): ?>

View File

@ -1,22 +0,0 @@
<?php
$defaultImage = (basename($space->getProfileImage()->getUrl()) == 'default_space.jpg' || basename($space->getProfileImage()->getUrl()) == 'default_space.jpg?cacheId=0') ? true : false;
?>
<?php
if ($space->color != null) {
$color = $space->color;
} else {
$color = '#d7d7d7';
}
?>
<div class="space-profile-acronym-<?= $space->id; ?> space-acronym <?= $cssAcronymClass; ?> <?php if (!$defaultImage) : ?>hidden<?php endif; ?>"
style="background-color: <?= $color; ?>; width: <?= $width; ?>px; height: <?= $height; ?>px;"><?php echo $acronym; ?></div>
<img class="space-profile-image-<?= $space->id; ?> img-rounded profile-user-photo <?= $cssImageClass; ?> <?php if ($defaultImage) : ?>hidden<?php endif; ?>"
src="<?php echo $space->getProfileImage()->getUrl(); ?>"
alt="<?= $space->name; ?>" style="width: <?= $width; ?>px; height: <?= $height; ?>px;"/>

View File

@ -9,6 +9,7 @@
* @since 0.5
*/
use yii\helpers\Html;
?>
<?php if (count($spaces) > 0) { ?>
<div id="user-spaces-panel" class="panel panel-default members" style="position: relative;">
@ -22,10 +23,20 @@ use yii\helpers\Html;
<div class="panel-body">
<?php foreach ($spaces as $space): ?>
<a href="<?php echo $space->getUrl(); ?>" class="tt" data-toggle="tooltip" data-placement="top" title=""
data-original-title="<?php echo Html::encode($space->name); ?>">
<?php echo \humhub\modules\space\widgets\SpaceImage::widget(['space' => $space, 'width' => 24, 'height' => 24, 'cssAcronymClass' => 'profile-user-spaces', 'cssImageClass' => 'profile-user-image-widget']); ?>
</a>
<?php echo \humhub\modules\space\widgets\Image::widget([
'space' => $space,
'width' => 24,
'htmlOptions' => [
'class' => 'current-space-image',
],
'link' => 'true',
'linkOptions' => [
'class' => 'tt',
'data-toggle' => 'tooltip',
'data-placement' => 'top',
'title' => Html::encode($space->name),
]
]); ?>
<?php endforeach; ?>
</div>

1002
themes/HumHub/config.codekit Normal file

File diff suppressed because it is too large Load Diff

View File

@ -848,58 +848,10 @@ input[type=select] {
text-align: center;
display: inline-block;
}
.space-acronym.profile-image {
border-radius: 4px;
font-size: 70px;
font-weight: 300;
padding: 15px 0;
}
.space-acronym.chooser {
border-radius: 2px;
font-size: 10px;
font-weight: 600;
padding: 5px 0;
float: left;
}
.space-acronym.chooser-current-space {
border-radius: 3px;
font-size: 16px;
font-weight: 600;
padding: 6px 0;
margin-right: 3px;
margin-top: 3px;
}
.space-acronym.profile-user-spaces {
border-radius: 2px;
font-size: 10px;
font-weight: 600;
padding: 5px 0;
}
.profile-user-image-widget {
margin-top: 4px;
}
.current-space-image {
margin-right: 3px;
margin-top: 3px;
}
.space-acronym.stream {
border-radius: 2px;
font-size: 12px;
font-weight: 600;
padding: 2px 0;
}
.space-acronym.new-spaces {
border-radius: 3px;
font-size: 16px;
font-weight: 600;
padding: 9px 0;
}
.space-acronym.directory-spaces {
border-radius: 3px;
font-size: 20px;
font-weight: 600;
padding: 11px 0;
}
.pagination-container {
text-align: center;
}

View File

@ -971,68 +971,11 @@ input[type=select] {
display: inline-block;
}
.space-acronym.profile-image {
border-radius: 4px;
font-size: 70px;
font-weight: 300;
padding: 15px 0;
}
.space-acronym.chooser {
border-radius: 2px;
font-size: 10px;
font-weight: 600;
padding: 5px 0;
float: left;
}
.space-acronym.chooser-current-space {
border-radius: 3px;
font-size: 16px;
font-weight: 600;
padding: 6px 0;
margin-right: 3px;
margin-top: 3px;
}
.space-acronym.profile-user-spaces {
border-radius: 2px;
font-size: 10px;
font-weight: 600;
padding: 5px 0;
}
.profile-user-image-widget {
margin-top: 4px;
}
.current-space-image {
margin-right: 3px;
margin-top: 3px;
}
.space-acronym.stream {
border-radius: 2px;
font-size: 12px;
font-weight: 600;
padding: 2px 0;
}
.space-acronym.new-spaces {
border-radius: 3px;
font-size: 16px;
font-weight: 600;
padding: 9px 0;
}
.space-acronym.directory-spaces {
border-radius: 3px;
font-size: 20px;
font-weight: 600;
padding: 11px 0;
}
//
// Pagination
// --------------------------------------------------