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

This commit is contained in:
Eliseu Amaro 2021-10-05 19:04:30 +01:00
parent 5373655170
commit a268aee53a
7 changed files with 73 additions and 67 deletions

View File

@ -64,11 +64,17 @@ class ProfileColor
$current_profile_color = DB::find('profile_color', ['actor_id' => $actor_id]);
$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,
'data' => $current_profile_color ? $current_profile_color->getColor() : "#000000",
'label' => _m('Profile Color'),
'help' => _m('Choose your Profile Color')]
'label' => _m('Profile foreground color'),
'help' => _m('Choose your Profile foreground color')]
],
['hidden', HiddenType::class, []],
['save_profile_color', SubmitType::class, ['label' => _m('Submit')]],
@ -84,7 +90,7 @@ class ProfileColor
}
$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::flush();

View File

@ -40,6 +40,7 @@ class ProfileColor extends Entity
// @codeCoverageIgnoreStart
private int $actor_id;
private string $color;
private string $background;
private \DateTimeInterface $created;
private \DateTimeInterface $modified;
@ -65,6 +66,17 @@ class ProfileColor extends Entity
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
{
$this->created = $created;
@ -94,10 +106,11 @@ class ProfileColor extends Entity
return [
'name' => 'profile_color',
'fields' => [
'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'],
'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'],
'actor_id' => ['type' => 'int', 'foreign key' => true, 'target' => 'Actor.id', 'multiplicity' => 'one to one', 'not null' => true, 'description' => 'foreign key to actor table'],
'background' => ['type' => 'text', 'not null' => true, 'description' => 'color hex code'],
'color' => ['type' => 'text', 'not null' => true, 'description' => 'color hex code'],
'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'],
];

View File

@ -93,13 +93,15 @@ class ProfileColor extends Plugin
$actor_id = $actor->getId();
try {
$color = DB::findOneBy('profile_color', ['actor_id' => $actor_id]);
$profile_color_tab = DB::findOneBy('profile_color', ['actor_id' => $actor_id]);
} catch (NotFoundException $e) {
return Event::next;
}
$color = DB::findBy('profile_color', ['actor_id'=>$actor_id])[0];
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]);
}
}

View File

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

View File

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

View File

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

View File

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