From a268aee53af253ce963979fa815e05ca5082cf3e Mon Sep 17 00:00:00 2001 From: eli Date: Tue, 5 Oct 2021 19:04:30 +0100 Subject: [PATCH] [CSS][PLUGIN] ProfileColor now handles both the background and foreground colors. Various button CSS fixes. --- .../ProfileColor/Controller/ProfileColor.php | 14 ++-- plugins/ProfileColor/Entity/ProfileColor.php | 21 ++++-- plugins/ProfileColor/ProfileColor.php | 6 +- .../profileColor/profileColorView.html.twig | 5 +- public/assets/default_theme/css/base.css | 24 ++++--- .../default_theme/css/widgets/buttons.css | 68 +++++++------------ .../default_theme/css/widgets/sections.css | 2 +- 7 files changed, 73 insertions(+), 67 deletions(-) diff --git a/plugins/ProfileColor/Controller/ProfileColor.php b/plugins/ProfileColor/Controller/ProfileColor.php index 6b86e47059..ec66352a78 100644 --- 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(); diff --git a/plugins/ProfileColor/Entity/ProfileColor.php b/plugins/ProfileColor/Entity/ProfileColor.php index 9a7acf6d46..993c47d632 100644 --- 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'], ]; diff --git a/plugins/ProfileColor/ProfileColor.php b/plugins/ProfileColor/ProfileColor.php index ab1375c3ea..d57802b3af 100644 --- 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]); } } diff --git a/plugins/ProfileColor/templates/profileColor/profileColorView.html.twig b/plugins/ProfileColor/templates/profileColor/profileColorView.html.twig index 97bb4be198..f740ea0dfb 100644 --- a/plugins/ProfileColor/templates/profileColor/profileColorView.html.twig +++ b/plugins/ProfileColor/templates/profileColor/profileColorView.html.twig @@ -1,7 +1,10 @@ {% block stylesheets %} {% endblock stylesheets %} \ No newline at end of file diff --git a/public/assets/default_theme/css/base.css b/public/assets/default_theme/css/base.css index 922fd57edd..35773aec4e 100644 --- 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 diff --git a/public/assets/default_theme/css/widgets/buttons.css b/public/assets/default_theme/css/widgets/buttons.css index df6e80739a..257da2b1b5 100644 --- 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; diff --git a/public/assets/default_theme/css/widgets/sections.css b/public/assets/default_theme/css/widgets/sections.css index f83896afd6..6fc22cc584 100644 --- 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;