Color picker for the circles
This commit is contained in:
parent
cd1d8fa1a7
commit
3d5614e8cd
File diff suppressed because one or more lines are too long
|
@ -64,15 +64,20 @@
|
|||
/**
|
||||
* on-circle takes a radius, position on a circle, number of possible positions and returns top and left properties
|
||||
*
|
||||
* $radius {Number} radius of the circle in pixels
|
||||
* $ordinalPosition {Number} the position of the item on the circle, counting from 1 (North) through N
|
||||
* $positions {Number} the number of positions on the circle
|
||||
* $radius {Number} radius of the circle
|
||||
* $originX {Number} optional X origin point for the circle, defaults to the radius
|
||||
* $originY {Number} optional Y origin point for the circle, defaults to the radius
|
||||
* $offsetX {Number} optional X offset for the item, you might use 1/2 of the width of an item, default is 0
|
||||
* $offsetY {Number} optional Y offset for the item, you might use 1/2 of the height of an item, default is 0
|
||||
*/
|
||||
@mixin on-circle ($ordinalPosition, $positions, $radius: 90%, $originX: 0, $originY: 0, $offsetX: 0, $offsetY: 0) {
|
||||
@mixin on-circle ($ordinalPosition, $positions) {
|
||||
$radius: 50%;
|
||||
$originX: 50%;
|
||||
$originY: 50%;
|
||||
$offsetX: 0;
|
||||
$offsetY: 0;
|
||||
|
||||
/*
|
||||
Determine the angle for the position:
|
||||
|
@ -98,6 +103,6 @@
|
|||
x = [origin x] + (r * cos angle)
|
||||
y = [origin y] + (r * sin angle)
|
||||
*/
|
||||
top: #{$originY + $offsetY + $radius * sin($positionAngleRadians)}px;
|
||||
left: #{$originX + $offsetX + $radius * cos($positionAngleRadians)}px;
|
||||
top: $originY + $offsetY + $radius * sin($positionAngleRadians);
|
||||
left: $originX + $offsetX + $radius * cos($positionAngleRadians);
|
||||
}
|
||||
|
|
17
userlist.php
17
userlist.php
|
@ -53,6 +53,12 @@ function imbb_register_metabox() {
|
|||
'id' => $prefix . 'level',
|
||||
'type' => 'text_small',
|
||||
));
|
||||
$cmb->add_field( array(
|
||||
'name' => esc_html__( 'Circle color', 'cmb2' ),
|
||||
'id' => $prefix . 'color',
|
||||
'type' => 'colorpicker',
|
||||
'default' => '#ffffff',
|
||||
));
|
||||
}
|
||||
|
||||
function galaxyuser($post, $i) { ?>
|
||||
|
@ -79,12 +85,17 @@ function imbb_usergalaxy() {
|
|||
<div class="imbb_container">
|
||||
<div class="circles circle-1">
|
||||
<?php
|
||||
for ($i = 1; $i <= count($query); $i++) {
|
||||
$color = 'rgb('.rand(0,255).', '.rand(0,255).', '.rand(0,255).')';
|
||||
$i = 1;
|
||||
foreach ($query as $post) {
|
||||
$color = get_post_meta( $post->ID, 'imbb_color', TRUE );
|
||||
if ($color === '#ffffff' || $color === '') {
|
||||
$color = 'rgb('.rand(0,255).', '.rand(0,255).', '.rand(0,255).')';
|
||||
}
|
||||
?>
|
||||
<div class="small-circle small-<?php echo $i ?>" data-color="<?php echo $color ?>"></div>
|
||||
<?php
|
||||
}
|
||||
$i++;
|
||||
}
|
||||
?>
|
||||
<div class="avatars">
|
||||
<?php
|
||||
|
|
Reference in New Issue