Skip to content

Commit c47ef60

Browse files
creecroscreecros
authored
Merge pull request #79 from creecros/avatar
Avatar Settings
2 parents fb84605 + 163c55b commit c47ef60

File tree

7 files changed

+159
-2
lines changed

7 files changed

+159
-2
lines changed

‎Assets/js/customizer.js

+29
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,35 @@ $(document).on('input', 'input[name="loginlogo_size"]', function(e) {
1414
document.getElementById("ll1").style.height = e.currentTarget.value + "px";
1515
});
1616

17+
var av_icon_output = $('av_icon_output')[0];
18+
19+
$(document).on('input', 'input[name="av_size"]', function(e) {
20+
var siz = e.currentTarget.value;
21+
av_icon_output.innerHTML = siz;
22+
if (document.querySelector(".avatar-preview .avatar-letter") !== null) {
23+
document.querySelector(".avatar-preview .avatar-letter").style.lineHeight = siz + "px";
24+
document.querySelector(".avatar-preview .avatar-letter").style.width = siz + "px";
25+
document.querySelector(".avatar-preview .avatar-letter").style.fontSize = (siz / 2) + "px";
26+
} else {
27+
var link = document.querySelector(".avatar-preview img").src;
28+
var changedLink = link.substring(0, link.length-2);
29+
document.querySelector(".avatar-preview img").src = changedLink + siz;
30+
}
31+
});
32+
33+
var av_radius_output = $('av_radius_output')[0];
34+
35+
$(document).on('input', 'input[name="av_radius"]', function(e) {
36+
var rad = e.currentTarget.value;
37+
av_radius_output.innerHTML = rad;
38+
if (document.querySelector(".avatar-preview .avatar-letter") !== null) {
39+
document.querySelector(".avatar-preview .avatar-letter").style.borderRadius = rad + "%";
40+
} else {
41+
document.querySelector(".avatar-preview img").style.borderRadius = rad + "%";
42+
}
43+
});
44+
45+
1746
//Accordion for settings page
1847

1948
document.addEventListener("DOMContentLoaded", function(event) {

‎Helper/DynamicAvatar.php

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<?php
2+
3+
namespace Kanboard\Plugin\Customizer\Helper;
4+
5+
use Kanboard\Helper\AvatarHelper;
6+
use Kanboard\Core\Base;
7+
/**
8+
* Avatar Helper
9+
*
10+
* @package helper
11+
* @author Craig Crosby
12+
*/
13+
class DynamicAvatar extends AvatarHelper
14+
{
15+
16+
public function dynamicRender($user_id, $username, $name, $email, $avatar_path, $css = 'avatar-left', $size = 48)
17+
{
18+
if (empty($user_id) && empty($username)) {
19+
$html = $this->avatarManager->renderDefault($size);
20+
} else {
21+
$html = $this->avatarManager->render($user_id, $username, $name, $email, $avatar_path, $size);
22+
}
23+
return '<div id="'.$css.'" class="avatar avatar-dyn '.$css.'">'.$html.'</div>';
24+
}
25+
26+
public function dynamic($user_id, $username, $name, $email, $avatar_path, $css = '', $size)
27+
{
28+
return $this->dynamicRender($user_id, $username, $name, $email, $avatar_path, $css, $size);
29+
}
30+
31+
public function currentUserDynamic($css = '')
32+
{
33+
$user = $this->userSession->getAll();
34+
return $this->dynamic($user['id'], $user['username'], $user['name'], $user['email'], $user['avatar_path'], $css, $this->configModel->get('av_size', '20'));
35+
}
36+
37+
38+
}

‎Plugin.php

+3-1
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ public function initialize()
4141

4242
//Helper
4343
$this->helper->register('themeHelper', '\Kanboard\Plugin\Customizer\Helper\ThemeHelper');
44+
$this->helper->register('dynamicAvatar', '\Kanboard\Plugin\Customizer\Helper\DynamicAvatar');
4445

4546
//Check if login logo is set
4647
if (null !== $this->customizerFileModel->getByType(3)) {
@@ -70,6 +71,7 @@ public function initialize()
7071
//Templates and Assets
7172
$this->template->hook->attach('template:config:sidebar', 'customizer:config/sidebar');
7273
$this->template->setTemplateOverride('header/title', 'customizer:header/title');
74+
$this->template->setTemplateOverride('header/user_dropdown', 'customizer:header/user_dropdown');
7375
$this->template->setTemplateOverride('layout', 'customizer:layout/layout');
7476
$this->template->setTemplateOverride('auth/index', 'customizer:layout/index');
7577
$this->hook->on('template:layout:css', array('template' => 'plugins/Customizer/Assets/rgbaColorPicker/rgbaColorPicker.css'));
@@ -133,7 +135,7 @@ public function getPluginAuthor()
133135

134136
public function getPluginVersion()
135137
{
136-
return '1.9.2';
138+
return '1.10.0';
137139
}
138140

139141
public function getPluginHomepage()

‎README.md

+9-1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@ If you need a Logo and Favicon, try using this simple logo generator: https://cr
2323

2424
* [header logo](#header-logo-rainbow)
2525
* set header logo size
26+
* [Upper right corner Avatar Icon](#avatar-icon-boy)
27+
* set icon size
28+
* set border radius
2629
* [customizable login screen](#fully-customizable-login-screen-gem)
2730
* [login logo](#login-logo-peach)
2831
* [login page background image url](#login-screen-background-image-dart)
@@ -33,13 +36,14 @@ If you need a Logo and Favicon, try using this simple logo generator: https://cr
3336
* panel shadow adjustment (no shadow to heavy shadow with color adjustment)
3437
* panel border adjustment (no border to thick border with color adjustment)
3538
* [favicon](#favicon-beginner)
36-
* [theme selector](#includes-preset-themes-mega) with 6 preloaded themes
39+
* [theme selector](#includes-preset-themes-mega) with 7 preloaded themes
3740
* Github :octocat:
3841
* Galaxy :milky_way:
3942
* Breathe :partly_sunny:
4043
* Clemson <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/Clemson_Tigers_logo.svg/2000px-Clemson_Tigers_logo.svg.png" height="20">
4144
* Blueboard :blue_book:
4245
* Material :sparkles:
46+
* KindaDark :8ball:
4347
* [theme creator](#theme-creator-notes)
4448

4549

@@ -53,6 +57,10 @@ If you need a Logo and Favicon, try using this simple logo generator: https://cr
5357

5458
![image](https://user-images.githubusercontent.com/26339368/47369113-f9e62d80-d6b0-11e8-90e0-974c31b4b535.png)
5559

60+
## Avatar Icon :boy:
61+
62+
![image](https://user-images.githubusercontent.com/26339368/55774303-8bc8d380-5a62-11e9-8d59-6dc2a1c33387.png)
63+
5664
## Login Logo :peach:
5765

5866
![image](https://user-images.githubusercontent.com/26339368/48488290-622ab980-e7ee-11e8-8efd-58d7b834a02f.png)

‎Template/file/show.php

+26
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,32 @@
119119
</ul>
120120
<?php endif ?>
121121
</div>
122+
123+
<div class="panel avatar-sizing-panel">
124+
<div class="panel-heading">
125+
<h3 class="panel-title"><?= t('Avatar Icon') ?></h3>
126+
</div>
127+
<?= $this->helper->dynamicAvatar->currentUserDynamic('avatar-preview') ?>
128+
<br>
129+
<br>
130+
<table>
131+
<tr>
132+
<th width="25%"><strong><?= t('Avatar Icon Size') ?></strong></th>
133+
<th><input type="range" name="av_size" id="av_size" min="20" max="50" value="<?= $this->task->configModel->get('av_size','20') ?>">
134+
<av_icon_output> <?= $this->task->configModel->get('av_size','20') ?></av_icon_output><?= t('&nbsp;pixels') ?>
135+
</th>
136+
</tr>
137+
<tr>
138+
<th width="25%"><strong><?= t('Avatar Icon Radius') ?></strong></th>
139+
<th><input type="range" name="av_radius" id="av_radius" min="0" max="50" value="<?= $this->task->configModel->get('av_radius','50') ?>">
140+
<av_radius_output> <?= $this->task->configModel->get('av_radius','50') ?></av_radius_output><?= t('&nbsp;percent') ?>
141+
</th>
142+
</tr>
143+
</table>
144+
145+
</div>
146+
147+
122148

123149
<table>
124150
<tr>

‎Template/header/user_dropdown.php

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<div class="dropdown">
2+
<a href="#" class="dropdown-menu dropdown-menu-link-icon" style="display:flex;position:relative;align-items:center;flex-direction:row;"><?= $this->helper->dynamicAvatar->currentUserDynamic('avatar-inline') ?><i class="fa fa-caret-down"></i></a>
3+
<ul>
4+
<li class="no-hover"><strong><?= $this->text->e($this->user->getFullname()) ?></strong></li>
5+
<li>
6+
<?= $this->url->icon('tachometer', t('My dashboard'), 'DashboardController', 'show', array('user_id' => $this->user->getId())) ?>
7+
</li>
8+
<li>
9+
<?= $this->url->icon('home', t('My profile'), 'UserViewController', 'show', array('user_id' => $this->user->getId())) ?>
10+
</li>
11+
<li>
12+
<?= $this->url->icon('folder', t('Projects management'), 'ProjectListController', 'show') ?>
13+
</li>
14+
<?php if ($this->user->hasAccess('UserListController', 'show')): ?>
15+
<li>
16+
<?= $this->url->icon('user', t('Users management'), 'UserListController', 'show') ?>
17+
</li>
18+
<li>
19+
<?= $this->url->icon('group', t('Groups management'), 'GroupListController', 'index') ?>
20+
</li>
21+
<li>
22+
<?= $this->url->icon('cubes', t('Plugins'), 'PluginController', 'show') ?>
23+
</li>
24+
<li>
25+
<?= $this->url->icon('cog', t('Settings'), 'ConfigController', 'index') ?>
26+
</li>
27+
<?php endif ?>
28+
29+
<?= $this->hook->render('template:header:dropdown') ?>
30+
31+
<li>
32+
<i class="fa fa-fw fa-life-ring" aria-hidden="true"></i>
33+
<?= $this->url->doc(t('Documentation'), 'index') ?>
34+
</li>
35+
<?php if (! DISABLE_LOGOUT): ?>
36+
<li>
37+
<?= $this->url->icon('sign-out', t('Logout'), 'AuthController', 'logout') ?>
38+
</li>
39+
<?php endif ?>
40+
</ul>
41+
</div>
42+
<style>
43+
.avatar-dyn img, .avatar-dyn div {border-radius: <?= $this->task->configModel->get('av_radius', '50') ?>%}
44+
.avatar-dyn .avatar-letter {line-height:<?= $this->task->configModel->get('av_size', '20') ?>px;width:<?= $this->task->configModel->get('av_size', '20') ?>px;font-size:<?= $this->task->configModel->get('av_size', '20') / 2 ?>px;}
45+
</style>

‎Template/layout/preview_style.php

+9
Original file line numberDiff line numberDiff line change
@@ -57,4 +57,13 @@
5757

5858
.preview-form-required { display: none;} /* This removes the standard required asterisk */
5959

60+
.avatar-preview img, .avatar-preview div {
61+
border-radius: <?= $this->task->configModel->get('av_radius','50') ?>%;
62+
}
63+
.avatar-preview .avatar-letter {
64+
line-height: <?= $this->task->configModel->get('av_size','20') ?>px;
65+
width: <?= $this->task->configModel->get('av_size','20') ?>px;
66+
font-size: <?= $this->task->configModel->get('av_size','20') / 2 ?>px;
67+
}
68+
6069
</style>

0 commit comments

Comments
 (0)