Joomla! Issue Tracker | Joomla! CMS #28461

Closed
4 Apr 2020
Very low
Build: 4.0-dev
Easy Test
# 28461
Diff
brianteeman:border

Pending

Pending Hound Hound is busy sniffing around... Details

User tests: Successful: Unsuccessful:

brianteeman
25 Mar 2020

The aim of this PR is to make the selects created with choices have the same styling as the selects without

Border color

the border color is defined twice as $input-border defines the color and then it is defined again by border-color

The first one in the variable is the correct one to use as it makes the choices select have the same color border as everything else.

Border radius

Uses the standard variable for the border radius

Placeholder text

Choices uses placeholder text which is gray and regular select uses $custom-select-color;

Dropdown arrows

Adds the arrows

Before

After

93102bf 25 Mar 2020

[4.0] choices scss

brianteeman - open - 25 Mar 2020

brianteeman - change - 25 Mar 2020

Status

New

⇒

Pending

joomla-cms-bot - change - 25 Mar 2020

Category

⇒

Administration Templates (admin)

be31df1 26 Mar 2020

brianteeman - change - 26 Mar 2020

Labels

Added: ?

brianteeman - change - 26 Mar 2020

The description was changed

brianteeman - edited - 26 Mar 2020

jwaisner - change - 26 Mar 2020

Priority	Medium	⇒	Very low
Easy	No	⇒	Yes

BertaOctech - comment - 2 Apr 2020

I have tested this item ? unsuccessfully on be31df1

I am afraid the patch did not work for me.

I checked the effect of the patch on the Filter Options of the Article list
administrator/index.php?option=com_content&view=articles

The style of the non-active filters did not changed when I applied the patch. I tested on Firefox & Chrome.

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/28461.}

BertaOctech - test_item - 2 Apr 2020 - Tested unsuccessfully

pabloarias - comment - 2 Apr 2020

I have tested this item ? unsuccessfully on be31df1

I've tested this path in Articles and Categories view but no change.

I've used Firefox 74 and Chromium 80.

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/28461.}

pabloarias - test_item - 2 Apr 2020 - Tested unsuccessfully

brianteeman - comment - 2 Apr 2020

As this PR required a rebuild of the css you need to either run npm ci on your system or test by downloading and installing the packages from https://ci.joomla.org:444/artifacts/joomla/joomla-cms/4.0-dev/28461/downloads/30641

BertaOctech - comment - 2 Apr 2020

Ah! OK, sorry about that, I will test again as soon as possible.

As this PR required a rebuild of the css you need to either run npm ci on your system or test by downloading and installing the packages from https://ci.joomla.org:444/artifacts/joomla/joomla-cms/4.0-dev/28461/downloads/30641

BertaOctech - comment - 3 Apr 2020

I have now installed patch package at

https://ci.joomla.org:444/artifacts/joomla/joomla-cms/4.0-dev/28461/downloads/30641/

Notice Your site has been updated. Your Joomla version is now 4.0.0-beta1-dev+pr.28461.

I have tested the site in Chrome and Firefox.

In Chrome the controls look fine.

However, in Firefox the borders appear correctly but the size of the controls is not the same. - See attached file

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/28461.}

BertaOctech - comment - 3 Apr 2020

Sorry, file attached now

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/28461.}

infograf768 - comment - 3 Apr 2020

May need more work. Here is the result for Select Author when an author is selected:

brianteeman - comment - 3 Apr 2020

Thanks for the feedback. These issues are all because of the full width background image that @C-Lodder has been banging on about. I will look to update this PR to not use the image and that should probably solve these issues

brianteeman - comment - 4 Apr 2020

closing while i update

brianteeman - change - 4 Apr 2020

Status	Pending	⇒	Closed
Closed_Date	0000-00-00 00:00:00	⇒	2020-04-04 20:37:23
Closed_By		⇒	brianteeman

brianteeman - close - 4 Apr 2020

ciar4n - comment - 10 Apr 2020

The CSS already exists to add the dropdown icon for [data-type="select-one"]. I assume we can extend this to include the searchtools data-type (select-multiple).

joomla-cms/administrator/templates/atum/scss/vendor/choicesjs/choices.scss

Lines 102 to 111 in 4617ce9

    
           .choices__inner { 
        
             padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x; 
        
             background: url("../../../images/select-bg.svg") no-repeat right center / $custom-select-bg-size; 
        
             background-color: $custom-select-bg; 
        
             [dir=rtl] & { 
        
               padding: $custom-select-padding-y $custom-select-padding-x $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding); 
        
               background: url("../../../images/select-bg-rtl.svg") no-repeat left center / $custom-select-bg-size; 
        
               background-color: $custom-select-bg; 
        
             }

ciar4n - comment - 11 Apr 2020

PR created.. #28658

Add a Comment

Older
Newer

Joomla! Issue Tracker - CMS

[#28461] - [4.0] choices scss

Border color

Border radius

Placeholder text

Dropdown arrows

Before

After

Add a Comment

	.choices__inner {
	padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
	background: url("../../../images/select-bg.svg") no-repeat right center / $custom-select-bg-size;
	background-color: $custom-select-bg;

	[dir=rtl] & {
	padding: $custom-select-padding-y $custom-select-padding-x $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding);
	background: url("../../../images/select-bg-rtl.svg") no-repeat left center / $custom-select-bg-size;
	background-color: $custom-select-bg;
	}