Steps to reproduce:

  1. Enable settings tray module.
  2. Clear cache
  3. Go to the Home page.
  4. Click Edit on top left.
  5. Click on pen icon over Site branding block and click quick edit.

Actual:
actual

Expected:
expected

CommentFileSizeAuthor
#24 3152333-24.patch8.66 KBmherchel
#23 3152333-23.patch7.46 KBmherchel
#22 3152333-22.patch5.7 KBmherchel
#21 3152333-21.patch3.46 KBmherchel
#17 dropdown-arrow-white-3152333-17.patch3.73 KBramya balasubramanian
#13 dropdown-arrow-in-settings-array-3152333-13.patch3.71 KBramya balasubramanian
#11 Screen Shot 2020-06-19 at 11.19.59 AM.png64.16 KBkomalk
#10 after_patch.png497.01 KBkiran.kadam911
#9 Screen Shot 2020-06-18 at 5.42.59 PM.png496.59 KBramya balasubramanian
#9 dropdown-array-in-settings-tray-not-aligned-3152333-9.patch3.71 KBramya balasubramanian
#7 Excepted-Behaviour.png38.48 KBpoojakural
#7 Actual Issue.png76.93 KBpoojakural
#7 New issue.png59.19 KBpoojakural
#7 Fixed Issue.png29.25 KBpoojakural
#5 Screen Shot 2020-06-17 at 6.16.10 PM.png924.74 KBramya balasubramanian
#5 Screen Shot 2020-06-17 at 6.15.34 PM.png864.42 KBramya balasubramanian
#5 dropdown-array-in-settings-array-not-visible-3152333-5.patch2.9 KBramya balasubramanian
Screenshot 2020-06-17 at 11.20.47 AM.png12.6 KBhimanshu_sindhwani
Screenshot 2020-06-17 at 11.20.25 AM.png12.49 KBhimanshu_sindhwani

Comments

himanshu_sindhwani created an issue. See original summary.

himanshu_sindhwani’s picture

himanshu_sindhwani commented
Parent issue: » #3149714: Olivero: Audit form items within settings tray for visual inconsistencies
Related issues: +#3149714: Olivero: Audit form items within settings tray for visual inconsistencies
himanshu_sindhwani’s picture

himanshu_sindhwani commented
Parent issue: #3149714: Olivero: Audit form items within settings tray for visual inconsistencies »
ramya balasubramanian’s picture

ramya balasubramanian commented
Assigned: Unassigned » ramya balasubramanian
ramya balasubramanian’s picture

ramya balasubramanian commented
Assigned: ramya balasubramanian » Unassigned
Status: Active » Needs review
StatusFileSize
new dropdown-array-in-settings-array-not-visible-3152333-5.patch2.9 KB
new Screen Shot 2020-06-17 at 6.15.34 PM.png864.42 KB
new Screen Shot 2020-06-17 at 6.16.10 PM.png924.74 KB

Hi @himanshu,

I have applied the patch and please review.


Few Notes:


1) I need to give padding is 2px where we have this --sp0-25: calc(0.25 * var(--sp)); which is equal to 4.5 so it is not suitable for me. So I have added 2px directly
2) Then we need to add some space between the icon and the word 'Toggle Branding'. Currently, the padding was given like
#drupal-off-canvas summary {
padding: 10px 20px ( If we change it into 25px it will look good).
}
But this file is a core file and we need to override this file which was already done in this https://www.drupal.org/project/olivero/issues/3149863. So I didn't adjust the space for now.

Before patch:

test


After Patch

test

steinmb’s picture

steinmb commented
Version: 8.x-1.0-alpha3 » 8.x-1.x-dev

@mherchel created a dev. We can now lock it to dev. instead the releases. Make it easier to roll/commit changes.

poojakural’s picture

poojakural commented
Status: Needs review » Needs work
StatusFileSize
new Fixed Issue.png29.25 KB
new New issue.png59.19 KB
new Actual Issue.png76.93 KB
new Excepted-Behaviour.png38.48 KB

Thanks @ramya for attaching the patch . Tested worked for me. I got one more issue. When click on "Toggle branding block" arrow is not aligned. Please refer the SS.

Actual Issue:
Actual Issue

Tested Actual Issue:
Fixed Issue

New Issue found:
New issue

Excepted Behaviour for new issue:
Excepted Behavouir

Please change the css:
Change this
[dir=ltr] .olivero-details[open] > .olivero-details__summary::before, [dir=ltr] .collapse-processed[open] > .olivero-details__summary .details-title::before {
transform: rotate(90deg);
}

To this
[dir=ltr] .olivero-details[open] > .olivero-details__summary::before, [dir=ltr] .collapse-processed[open] > .olivero-details__summary .details-title::before {
transform: rotate(45deg);
}

ramya balasubramanian’s picture

ramya balasubramanian commented
Assigned: Unassigned » ramya balasubramanian
ramya balasubramanian’s picture

ramya balasubramanian commented
Assigned: ramya balasubramanian » Unassigned
Status: Needs work » Needs review
StatusFileSize
new dropdown-array-in-settings-tray-not-aligned-3152333-9.patch3.71 KB
new Screen Shot 2020-06-18 at 5.42.59 PM.png496.59 KB

Hi @poojakural,

Thanks for your review. Added the patch again, Please have a look.


After Patch:


test

kiran.kadam911’s picture

kiran.kadam911
he/him
Location Mumbai, India 🇮🇳
commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new after_patch.png497.01 KB

Hello @Ramya Balasubramanian,

Patch #9 working as expected.

Screenshot:

Thanks!

komalk’s picture

komalk commented
StatusFileSize
new Screen Shot 2020-06-19 at 11.19.59 AM.png64.16 KB

@Ramya Balasubramanian
Please try to fix the linting errors. Please have a look at the screenshot.

ramya balasubramanian’s picture

ramya balasubramanian commented
Assigned: Unassigned » ramya balasubramanian
ramya balasubramanian’s picture

ramya balasubramanian commented
StatusFileSize
new dropdown-arrow-in-settings-array-3152333-13.patch3.71 KB

Hi @komalkolekar,

Thanks. Updated the patch.

ramya balasubramanian’s picture

ramya balasubramanian commented
Assigned: ramya balasubramanian » Unassigned
pradeepjha’s picture

pradeepjha commented

Hi @Ramya Balasubramanian
We should use color variable. Please check similar ticket for help https://www.drupal.org/project/olivero/issues/3151405#comment-13702362.

border: solid var(--color--white);

You might need to re-compile your code after that.

ramya balasubramanian’s picture

ramya balasubramanian commented
Assigned: Unassigned » ramya balasubramanian
ramya balasubramanian’s picture

ramya balasubramanian commented
StatusFileSize
new dropdown-arrow-white-3152333-17.patch3.73 KB

Hi @pradeepjha,

I have addressed your comment. Please have look at this patch.

ramya balasubramanian’s picture

ramya balasubramanian commented
Assigned: ramya balasubramanian » Unassigned
steinmb’s picture

steinmb commented
Status: Reviewed & tested by the community » Needs review
manojithape’s picture

manojithape commented
Assigned: Unassigned » manojithape

Working on the issue

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Assigned: manojithape » mherchel
Status: Needs review » Needs work
StatusFileSize
new 3152333-21.patch3.46 KB

I like the approach of using border instead of an inline SVG.

Here's a working patch using the SVG approach. I'm going to mess with it a bit more.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs work » Needs review
StatusFileSize
new 3152333-22.patch5.7 KB

Here's a version of the patch that uses borders to form the chevron (similar to #17).

I tested this in both the settings tray and in regular details form. I also tested in RTL mode.

Still need to do cross browser and Windows High Contrast testing.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
StatusFileSize
new 3152333-23.patch7.46 KB

The previous patches were all jacked up in Safari. I opened a bug within webkit (https://bugs.webkit.org/show_bug.cgi?id=217378)

This patch works great in all browsers (including IE in High Contrast mode), with the exception of the settings tray within IE.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
StatusFileSize
new 3152333-24.patch8.66 KB

This patch fixes even more cross browser bugs in FF and IE

  • mherchel committed e3f3e14 on 8.x-1.x 
    Issue #3152333 by Ramya Balasubramanian, mherchel, poojakural,...
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs review » Fixed

Did some additional testing. This is as good as it's going to get. Committing.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.