wamo/gnu-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[CSS][PLUGIN] ProfileColor now handles both the background and foreground colors. Various button CSS fixes.

Browse Source
This commit is contained in:
eli 2021-10-05 19:04:30 +01:00
parent 5373655170
commit a268aee53a
7 changed files with 73 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
plugins/ProfileColor/Controller/ProfileColor.php
View File

@ -64,11 +64,17 @@ class ProfileColor
$current_profile_color = DB::find('profile_color', ['actor_id' => $actor_id]); $current_profile_color = DB::find('profile_color', ['actor_id' => $actor_id]);
$form = Form::create([ $form = Form::create([
['color', ColorType::class, [ ['background_color', ColorType::class, [
'html5' => true,
'data' => $current_profile_color ? $current_profile_color->getBackground() : "#000000",
'label' => _m('Profile background color'),
'help' => _m('Choose your Profile background color')]
],
['foreground_color', ColorType::class, [
'html5' => true, 'html5' => true,
'data' => $current_profile_color ? $current_profile_color->getColor() : "#000000", 'data' => $current_profile_color ? $current_profile_color->getColor() : "#000000",
'label' => _m('Profile Color'), 'label' => _m('Profile foreground color'),
'help' => _m('Choose your Profile Color')] 'help' => _m('Choose your Profile foreground color')]
], ],
['hidden', HiddenType::class, []], ['hidden', HiddenType::class, []],
['save_profile_color', SubmitType::class, ['label' => _m('Submit')]], ['save_profile_color', SubmitType::class, ['label' => _m('Submit')]],
@ -84,7 +90,7 @@ class ProfileColor
} }
$data = $form->getData(); $data = $form->getData();
$current_profile_color = Entity\ProfileColor::create(['actor_id' => $actor_id, 'color' => $data['color']]); $current_profile_color = Entity\ProfileColor::create(['actor_id' => $actor_id, 'color' => $data['foreground_color'], 'background' => $data['background_color']]);
DB::persist($current_profile_color); DB::persist($current_profile_color);
DB::flush(); DB::flush();

21
plugins/ProfileColor/Entity/ProfileColor.php
View File

@ -40,6 +40,7 @@ class ProfileColor extends Entity
// @codeCoverageIgnoreStart // @codeCoverageIgnoreStart
private int $actor_id; private int $actor_id;
private string $color; private string $color;
private string $background;
private \DateTimeInterface $created; private \DateTimeInterface $created;
private \DateTimeInterface $modified; private \DateTimeInterface $modified;
@ -65,6 +66,17 @@ class ProfileColor extends Entity
return $this->color; return $this->color;
} }
public function setBackground(string $background): self
{
$this->background = $background;
return $this;
}
public function getBackground(): string
{
return $this->background;
}
public function setCreated(DateTimeInterface $created): self public function setCreated(DateTimeInterface $created): self
{ {
$this->created = $created; $this->created = $created;
@ -94,10 +106,11 @@ class ProfileColor extends Entity
return [ return [
'name' => 'profile_color', 'name' => 'profile_color',
'fields' => [ 'fields' => [
'actor_id' => ['type' => 'int', 'foreign key' => true, 'target' => 'Actor.id', 'multiplicity' => 'one to one', 'not null' => true, 'description' => 'foreign key to actor table'], 'actor_id' => ['type' => 'int', 'foreign key' => true, 'target' => 'Actor.id', 'multiplicity' => 'one to one', 'not null' => true, 'description' => 'foreign key to actor table'],
'color' => ['type' => 'text', 'not null' => true, 'description' => 'color hex code'], 'background' => ['type' => 'text', 'not null' => true, 'description' => 'color hex code'],
'created' => ['type' => 'datetime', 'not null' => true, 'description' => 'date this record was created', 'default' => 'CURRENT_TIMESTAMP'], 'color' => ['type' => 'text', 'not null' => true, 'description' => 'color hex code'],
'modified' => ['type' => 'timestamp', 'not null' => true, 'description' => 'date this record was modified', 'default' => 'CURRENT_TIMESTAMP'], 'created' => ['type' => 'datetime', 'not null' => true, 'description' => 'date this record was created', 'default' => 'CURRENT_TIMESTAMP'],
'modified' => ['type' => 'timestamp', 'not null' => true, 'description' => 'date this record was modified', 'default' => 'CURRENT_TIMESTAMP'],
], ],
'primary key' => ['actor_id'], 'primary key' => ['actor_id'],
]; ];

6
plugins/ProfileColor/ProfileColor.php
View File

@ -93,13 +93,15 @@ class ProfileColor extends Plugin
$actor_id = $actor->getId(); $actor_id = $actor->getId();
try { try {
$color = DB::findOneBy('profile_color', ['actor_id' => $actor_id]); $profile_color_tab = DB::findOneBy('profile_color', ['actor_id' => $actor_id]);
} catch (NotFoundException $e) { } catch (NotFoundException $e) {
return Event::next; return Event::next;
} }
$color = DB::findBy('profile_color', ['actor_id'=>$actor_id])[0];
if ($color !== null) { if ($color !== null) {
$res[] = Formatting::twigRenderFile('/profileColor/profileColorView.html.twig', ['profile_color' => $color, 'actor' => $actor_id]); $color = $color->getColor();
$res[] = Formatting::twigRenderFile('/profileColor/profileColorView.html.twig', ['profile_color' => $profile_color_tab, 'actor' => $actor_id]);
} }
} }

5
plugins/ProfileColor/templates/profileColor/profileColorView.html.twig
View File

@ -1,7 +1,10 @@
{% block stylesheets %} {% block stylesheets %}
<style> <style>
#profile-{{ actor }} { #profile-{{ actor }} {
background: {{ profile_color.color }} !important; background: {{ profile_color.background }} !important;
}
#profile-{{ actor }} * {
color: {{ profile_color.color }} !important;
} }
</style> </style>
{% endblock stylesheets %} {% endblock stylesheets %}

24
public/assets/default_theme/css/base.css
View File

@ -62,6 +62,7 @@ details>summary::-webkit-details-marker {
} }
body, body,
html { html {
all: unset;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
background-attachment: fixed; background-attachment: fixed;
@ -211,6 +212,7 @@ url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVE
.button-container:focus, .button-container:focus,
.button-container:hover, .button-container:hover,
.set-background-color-accent, .set-background-color-accent,
input[type=checkbox],
input[type=checkbox]:focus, input[type=checkbox]:focus,
input[type=checkbox]:hover, input[type=checkbox]:hover,
input[type=radio]:focus, input[type=radio]:focus,
@ -218,16 +220,15 @@ url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVE
background-color: #8081BA !important background-color: #8081BA !important
} }
.note-actions-set, .note-actions-set,
.set-background-color-foreground, .set-background-color-foreground {
input[type=radio]:checked {
background-color: #FFF !important background-color: #FFF !important
} }
*, *,
.set-foreground-color, .set-foreground-color,
::file-selector-button, ::file-selector-button,
input[type=file] { input[type=file] {
color: #FFF !important; color: #FFF;
fill: #FFF !important fill: #FFF
} }
.accessibility-menu, .accessibility-menu,
.set-border-accent { .set-border-accent {
@ -239,8 +240,7 @@ url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVE
.section-widget, .section-widget,
.set-border-soft, .set-border-soft,
button, button,
input, input:not([type=checkbox], [type=radio]),
input[type=radio],
select, select,
textarea, textarea,
.section-settings, .section-settings,
@ -314,7 +314,7 @@ url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVE
input, input,
select, select,
textarea { textarea {
background-color: #eceff488 background-color: #eceff488 !important;
} }
.set-background-color-gradient, .set-background-color-gradient,
button:not(.button-container), button:not(.button-container),
@ -344,15 +344,16 @@ url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVE
} }
.note-actions-set, .note-actions-set,
.set-background-color-foreground, .set-background-color-foreground,
input[type=radio]:checked { input[type=radio]:checked,
input[type=checkbox]:checked {
background-color: #2e3440 !important background-color: #2e3440 !important
} }
*, *,
.set-foreground-color, .set-foreground-color,
::file-selector-button, ::file-selector-button,
input[type=file] { input[type=file] {
color: #2e3440 !important; color: #2e3440;
fill: #2e3440 !important fill: #2e3440
} }
.accessibility-menu, .accessibility-menu,
.set-border-accent { .set-border-accent {
@ -548,6 +549,9 @@ hr {
padding: 0.6rem; padding: 0.6rem;
overflow-y: auto overflow-y: auto
} }
#panel-right-icon {
margin-left: 12px !important;
}
@media only screen and (min-width: 1281px) { @media only screen and (min-width: 1281px) {
.content { .content {
padding: 0.6rem 1.62rem 0 padding: 0.6rem 1.62rem 0

68
public/assets/default_theme/css/widgets/buttons.css
View File

@ -1,43 +1,32 @@
input {
all: unset;
}
input + label {
align-self: center;
}
button { button {
cursor: pointer !important; cursor: pointer !important;
float: right !important; float: right !important;
align-self: end !important align-self: end !important
} }
input {
cursor: text !important
}
button,
input {
all: unset;
padding: 5px 10px
}
button,
select,
input:not([type=text]) {
cursor: pointer !important
}
input:not([type=button],
[type=color],
[type=checkbox],
[type=radio]) {
cursor: auto !important
}
*|*::-moz-button-content { *|*::-moz-button-content {
all: unset all: unset !important;
}
input[type=checkbox] {
display: inline-flex;
width: 1em;
height: 1em
} }
input[type=checkbox],
input[type=radio] { input[type=radio] {
all: unset; all: unset;
cursor: pointer !important;
display: inline-block; display: inline-block;
width: 1em; cursor: pointer !important;
height: 1em; width: 1em !important;
border-radius: 50%; height: 1em !important;
margin: 3px 3px 0 5px }
input[type=checkbox]:not(:hover, :focus),
input[type=radio]:not(:hover, :focus) {
opacity: 75%;
}
input[type=radio] {
border-radius: 50% !important;
margin: 3px 3px 0 5px !important;
} }
input[type=file] { input[type=file] {
all: unset; all: unset;
@ -45,10 +34,6 @@ input[type=file] {
width: 100%; width: 100%;
border-radius: 0.6rem !important border-radius: 0.6rem !important
} }
input+label {
all: unset;
align-self: center
}
::file-selector-button { ::file-selector-button {
cursor: pointer; cursor: pointer;
background-color: unset; background-color: unset;
@ -63,20 +48,17 @@ button {
select, select,
button, button,
textarea, textarea,
input { input:not([type=radio], [type=checkbox]) {
display: inline-block; display: inline-flex !important;
overflow: hidden; overflow: hidden;
font-size: inherit !important; font-size: inherit !important;
padding: 6px 8px; padding: 6px 8px !important;
border-radius: 0.6rem border-radius: 0.6rem
} }
button {
padding: 4px 12px;
margin-left: auto
}
select { select {
-webkit-appearance: none !important; -webkit-appearance: none !important;
-moz-appearance: none !important; -moz-appearance: none !important;
cursor: pointer;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 16px; background-size: 16px;
background-position: center right 5px; background-position: center right 5px;
@ -86,10 +68,6 @@ input[type=radio] {
border: solid 0.25em !important border: solid 0.25em !important
} }
input[type=checkbox] { input[type=checkbox] {
all: unset;
display: inline-block;
width: 1.3rem;
height: 1.3rem;
vertical-align: middle; vertical-align: middle;
background-size: cover; background-size: cover;
margin-right: 2px; margin-right: 2px;

2
public/assets/default_theme/css/widgets/sections.css
View File

@ -10,8 +10,8 @@
} }
.profile *[class*="profile-info-"] { .profile *[class*="profile-info-"] {
flex: 1; flex: 1;
mix-blend-mode: difference
} }
.profile-info { .profile-info {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;