gian/phpmyadmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix select all arrow image dark color issue with Bootstrap theme

Browse Source 
Replaces RTL images with CSS transformation.

- Fixes https://github.com/phpmyadmin/phpmyadmin/issues/18368

Co-authored-by: Liviu-Mihail Concioiu <liviu.concioiu@gmail.com>

Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>
This commit is contained in:
Maurício Meneghini Fauth 2023-06-16 18:24:20 -03:00
parent 59d17854f0
commit 0b1a743fa0
No known key found for this signature in database
GPG Key ID: 6A16FD38AFC89CC8
24 changed files with 60 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/themes/bootstrap/img/arrow_rtl.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 102 B

1
public/themes/bootstrap/img/dark/select-all-arrow.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="0 0 38 22" xmlns="http://www.w3.org/2000/svg" stroke="#adb5bd"><path d="M9 2h1m0 1h1M6 5h1m3 1h1M9 7h1m4 9h1m16 0h1M8 3h1M8 4h1m2 1h1M5 6h1m5 0h2m-4 7h1m-1 1h1m15 2h1M9 3h1M9 8h1m-1 8h1m11 0h1m4 0h1m2 0h1M7 4h1M6 6h1m2 0h1m2 10h1m4 0h1m1 0h2m6 0h1m4 0h1M9 4h2M8 6h1m4 0h1m-5 4h1m5 6h1m7 0h1m4 0h1m1 0h1M11 4h1M9 5h2m1 0h1M9 9h1m1 7h1m4 0h1m1 0h1M7 5h2m0 7h1m-1 3h1m3 1h1m10 0h1M7 6h1m1 5h1m0 5h1m11 0h1"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 425 B

1
public/themes/bootstrap/img/select-all-arrow.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="0 0 38 22" xmlns="http://www.w3.org/2000/svg" stroke="#212529"><path d="M9 2h1m0 1h1M6 5h1m3 1h1M9 7h1m4 9h1m16 0h1M8 3h1M8 4h1m2 1h1M5 6h1m5 0h2m-4 7h1m-1 1h1m15 2h1M9 3h1M9 8h1m-1 8h1m11 0h1m4 0h1m2 0h1M7 4h1M6 6h1m2 0h1m2 10h1m4 0h1m1 0h2m6 0h1m4 0h1M9 4h2M8 6h1m4 0h1m-5 4h1m5 6h1m7 0h1m4 0h1m1 0h1M11 4h1M9 5h2m1 0h1M9 9h1m1 7h1m4 0h1m1 0h1M7 5h2m0 7h1m-1 3h1m3 1h1m10 0h1M7 6h1m1 5h1m0 5h1m11 0h1"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 425 B

5
public/themes/bootstrap/scss/_common.scss
View File

@ -153,11 +153,6 @@ td .icon {
margin: 0;
}
.selectallarrow {
margin-right: 0.3em;
margin-left: 0.6em;
}
.with-selected {
margin-left: 2em;
}

16
public/themes/bootstrap/scss/_icons.scss
View File

@ -4,6 +4,7 @@
padding: 0 !important;
width: 16px;
height: 16px;
background-repeat: no-repeat;
}
.icon_fulltext {
@ -11,6 +12,17 @@
height: 19px;
}
.ic_select_all_arrow {
width: 38px;
height: 22px;
margin-right: 1rem;
background-image: url('../img/select-all-arrow.svg');
&[dir=rtl] {
transform: scaleX(-1);
}
}
.ic_asc_order {
background-image: url('../img/asc_order.png');
}
@ -682,6 +694,10 @@
}
@include color-mode(dark) {
.ic_select_all_arrow {
background-image: url('../img/dark/select-all-arrow.svg');
}
.ic_asc_order {
background-image: url('../img/asc_order.png');
}

BIN
public/themes/metro/img/arrow_rtl.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 145 B

0
public/themes/metro/img/arrow_ltr.png → public/themes/metro/img/select-all-arrow.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 147 B

After

Width:  |  Height:  |  Size: 147 B

5
public/themes/metro/scss/_common.scss
View File

@ -472,11 +472,6 @@ img.lightbulb {
color: inherit !important;
}
.selectallarrow {
margin-right: 0.3em;
margin-left: 0.6em;
}
.with-selected {
margin-left: 2em;
}

12
public/themes/metro/scss/_icons.scss
View File

@ -4,6 +4,7 @@
padding: 0 !important;
width: 16px;
height: 16px;
background-repeat: no-repeat;
}
.icon_fulltext {
@ -11,6 +12,17 @@
height: 19px;
}
.ic_select_all_arrow {
width: 38px;
height: 22px;
margin-right: 1rem;
background-image: url('../img/select-all-arrow.png');
&[dir=rtl] {
transform: scaleX(-1);
}
}
.ic_asc_order {
background-image: url('../img/asc_order.png');
}

BIN
public/themes/original/img/arrow_rtl.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 102 B

0
public/themes/bootstrap/img/arrow_ltr.png → public/themes/original/img/select-all-arrow.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 101 B

After

Width:  |  Height:  |  Size: 101 B

5
public/themes/original/scss/_common.scss
View File

@ -177,11 +177,6 @@ img.lightbulb {
background-position: center;
}
.selectallarrow {
margin-right: 0.3em;
margin-left: 0.6em;
}
.with-selected {
margin-left: 2em;
}

12
public/themes/original/scss/_icons.scss
View File

@ -4,6 +4,7 @@
padding: 0 !important;
width: 16px;
height: 16px;
background-repeat: no-repeat;
}
.icon_fulltext {
@ -11,6 +12,17 @@
height: 19px;
}
.ic_select_all_arrow {
width: 38px;
height: 22px;
margin-right: 1rem;
background-image: url('../img/select-all-arrow.png');
&[dir=rtl] {
transform: scaleX(-1);
}
}
.ic_asc_order {
background-image: url('../../pmahomme/img/asc_order.png');
}

BIN
public/themes/pmahomme/img/arrow_ltr.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 101 B

BIN
public/themes/pmahomme/img/arrow_rtl.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 102 B

0
public/themes/original/img/arrow_ltr.png → public/themes/pmahomme/img/select-all-arrow.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 101 B

After

Width:  |  Height:  |  Size: 101 B

5
public/themes/pmahomme/scss/_common.scss
View File

@ -354,11 +354,6 @@ img.lightbulb {
color: inherit !important;
}
.selectallarrow {
margin-right: 0.3em;
margin-left: 0.6em;
}
.with-selected {
margin-left: 2em;
}

12
public/themes/pmahomme/scss/_icons.scss
View File

@ -4,6 +4,7 @@
padding: 0 !important;
width: 16px;
height: 16px;
background-repeat: no-repeat;
}
.icon_fulltext {
@ -11,6 +12,17 @@
height: 19px;
}
.ic_select_all_arrow {
width: 38px;
height: 22px;
margin-right: 1rem;
background-image: url('../img/select-all-arrow.png');
&[dir=rtl] {
transform: scaleX(-1);
}
}
.ic_asc_order {
background-image: url('../img/asc_order.png');
}

3
templates/database/privileges/index.twig
View File

@ -108,8 +108,7 @@
</div>
<div>
<img class="selectallarrow" src="{{ image('arrow_' ~ text_dir ~ '.png') }}" alt="
{%- trans 'With selected:' %}" width="38" height="22">
{{ get_image('select_all_arrow', 'With selected:'|trans, { 'dir': text_dir, 'width': '38', 'height': '22' }) }}
<input type="checkbox" id="usersForm_checkall" class="checkall_box" title="{% trans 'Check all' %}">
<label for="usersForm_checkall">{% trans 'Check all' %}</label>
<em class="with-selected">{% trans 'With selected:' %}</em>

2
templates/database/structure/check_all_tables.twig
View File

@ -1,5 +1,5 @@
<div class="clearfloat d-print-none">
<img class="selectallarrow" src="{{ image('arrow_' ~ text_dir ~ '.png') }}" width="38" height="22" alt="{% trans 'With selected:' %}">
{{ get_image('select_all_arrow', 'With selected:'|trans, { 'dir': text_dir, 'width': '38', 'height': '22' }) }}
<input type="checkbox" id="tablesForm_checkall" class="checkall_box" title="{% trans 'Check all' %}">
<label for="tablesForm_checkall">{% trans 'Check all' %}</label>
{% if overhead_check != '' %}

2
templates/display/results/table.twig
View File

@ -311,7 +311,7 @@
{% if has_bulk_links %}
<div class="d-print-none">
<img class="selectallarrow" src="{{ image('arrow_' ~ text_dir ~ '.png') }}" width="38" height="22" alt="{% trans 'With selected:' %}">
{{ get_image('select_all_arrow', 'With selected:'|trans, { 'dir': text_dir, 'width': '38', 'height': '22' }) }}
<input type="checkbox" id="resultsForm_{{ unique_id }}_checkall" class="checkall_box" title="{% trans 'Check all' %}">
<label for="resultsForm_{{ unique_id }}_checkall">{% trans 'Check all' %}</label>
<em class="with-selected">{% trans 'With selected:' %}</em>

3
templates/select_all.twig
View File

@ -1,5 +1,4 @@
<img class="selectallarrow" src="{{ image('arrow_' ~ text_dir ~ '.png') }}"
width="38" height="22" alt="{% trans 'With selected:' %}">
{{ get_image('select_all_arrow', 'With selected:'|trans, { 'dir': text_dir, 'width': '38', 'height': '22' }) }}
<input type="checkbox" id="{{ form_name }}_checkall" class="checkall_box"
title="{% trans 'Check all' %}">
<label for="{{ form_name }}_checkall">{% trans 'Check all' %}</label>

3
templates/server/privileges/users_overview.twig
View File

@ -116,8 +116,7 @@
<div class="float-start row">
<div class="col-12">
<img class="selectallarrow" width="38" height="22" src="
{{- image('arrow_' ~ text_dir ~ '.png') }}" alt="{% trans 'With selected:' %}">
{{ get_image('select_all_arrow', 'With selected:'|trans, { 'dir': text_dir, 'width': '38', 'height': '22' }) }}
<input type="checkbox" id="usersForm_checkall" class="checkall_box" title="{% trans 'Check all' %}">
<label for="usersForm_checkall">{% trans 'Check all' %}</label>
<em class="with-selected">{% trans 'With selected:' %}</em>

3
templates/table/privileges/index.twig
View File

@ -112,8 +112,7 @@
</div>
<div>
<img class="selectallarrow" src="{{ image('arrow_' ~ text_dir ~ '.png') }}" alt="
{%- trans 'With selected:' %}" width="38" height="22">
{{ get_image('select_all_arrow', 'With selected:'|trans, { 'dir': text_dir, 'width': '38', 'height': '22' }) }}
<input type="checkbox" id="usersForm_checkall" class="checkall_box" title="{% trans 'Check all' %}">
<label for="usersForm_checkall">{% trans 'Check all' %}</label>
<em class="with-selected">{% trans 'With selected:' %}</em>