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

2021-10-05 19:04:30 +01:00 · 2021-10-05 19:04:30 +01:00 · a268aee53a
commit a268aee53a
parent 5373655170
7 changed files with 73 additions and 67 deletions
--- a/plugins/ProfileColor/Controller/ProfileColor.php
+++ b/plugins/ProfileColor/Controller/ProfileColor.php
@ -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();

--- a/plugins/ProfileColor/Entity/ProfileColor.php
+++ b/plugins/ProfileColor/Entity/ProfileColor.php
@ -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'],
        ];
--- a/plugins/ProfileColor/ProfileColor.php
+++ b/plugins/ProfileColor/ProfileColor.php
@ -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]);
            }
        }

--- a/plugins/ProfileColor/templates/profileColor/profileColorView.html.twig
+++ b/plugins/ProfileColor/templates/profileColor/profileColorView.html.twig
@ -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 %}
--- a/public/assets/default_theme/css/base.css
+++ b/public/assets/default_theme/css/base.css
@ -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
--- a/public/assets/default_theme/css/widgets/buttons.css
+++ b/public/assets/default_theme/css/widgets/buttons.css
@ -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;
--- a/public/assets/default_theme/css/widgets/sections.css
+++ b/public/assets/default_theme/css/widgets/sections.css
@ -10,8 +10,8 @@
 }
 .profile *[class*="profile-info-"] {
    flex: 1;
-    mix-blend-mode: difference
 }
+
 .profile-info {
    display: flex;
    flex-wrap: wrap;