Skip to content

Update styles on editor-header icon picker#10822

Closed
nathanwoulfe wants to merge 1 commit intoumbraco:v8/contribfrom
nathanwoulfe:v8/doctype-icon-picker-styles
Closed

Update styles on editor-header icon picker#10822
nathanwoulfe wants to merge 1 commit intoumbraco:v8/contribfrom
nathanwoulfe:v8/doctype-icon-picker-styles

Conversation

@nathanwoulfe
Copy link
Copy Markdown
Contributor

Prerequisites

  • I have added steps to test this contribution in the description below

Description

Updates the border color and radius on the icon picker in the editor header, to match the styling of the name input. Also removes some inline styles and unnecessary markup, and update the back button to remove the font-awesome icon in favor of the same icon from the backoffice set.

Didn't look quite right having rounded corners beside the squared input, and the slightly different border color triggered my OCD.

Before:
before
After:
after

And the back button, before:
backbtn-before
After:
backbtn-after

To test, verify the header renders correctly on a content node, a content node accessed from a list view, a media item, a content type, a user and a media/content/blocklist picker. It is used in a stack more places (70+), but these will cover the variations.

@bjarnef
Copy link
Copy Markdown
Contributor

bjarnef commented Aug 10, 2021

I noticed the back icon in this PR as well #10805 but kept the Font Awesome back icon. I recall the mini listview is using the icon-arrow-left as back icon as well.

We could also use any custom SVG icon here if we want to change this later. For now Font Awesome is still used for e.g. logviewer polling icon and external login providers. In backoffice rebuild we may choose the remove font awesome and maybe support of font icons in general? Currently we have many hacks to ensure correct font, use correct line height etc, so in backoffice rebuild it would be worth considering if we still need font icons or just should stick with only SVG icons.

@nathanwoulfe
Copy link
Copy Markdown
Contributor Author

I did a search for any instances of fa-, only other I saw was the logviewer, which I'll look at removing too. The rounded arrow annoyed me, since the other arrows and chevrons in the menu are all nice and sharp.

I think dropping FontAwesome would be, well, awesome. All the FA icons are available as SVG, so if anyone wanted to include these, they absolutely can, but it's really just extra weight that the CMS doesn't need.

@bjarnef
Copy link
Copy Markdown
Contributor

bjarnef commented Aug 10, 2021

Yeah, although the polling icon use fa-spin as well, but we could probably just have a utility class to make CSS rotation of an icon. Maybe other CSS animations could be useful too later.

Currently there are these four references:
https://github.com/umbraco/Umbraco-CMS/search?l=HTML&q=fa

And this one using a core font icon, but font awesome class for animation:
https://github.com/umbraco/Umbraco-CMS/blob/v8/contrib/src/Umbraco.Web.UI.Client/src/views/logviewer/search.controller.js#L100

It would be great if you have time to look at #10805 as well as it would clean up many of the classes and remove pretty much all <i> elements representing icons.

@nathanwoulfe
Copy link
Copy Markdown
Contributor Author

@bjarnef, I'd forgotten about the Helveticons icon font - I'm going to clean up (aka remove) this from the mini-list-view and log spinner, but will deal with #10805 first, so there's no conflicts.

Not sure how we'd determine usages of the Helveticons font, given devs could be using it in packages/customisation. I guess if it's shipped as a resource, but not used by the CMS, that's a good enough compromise.

@umbrabot
Copy link
Copy Markdown

Hi there @nathanwoulfe!

Thanks for the contribution here and apologies if it has been a while since you heard from us. We have been in the very fortunate position of having lots of work to do. With this in mind, we are writing to let you know that with the release of the Long Term Support (LTS) version, 8.18, we have now moved into the support phase of Umbraco 8. You can read all about that here but to surmise, we will be keeping Umbraco 8 safe and well by releasing patching for security or regression issues if they arise but no longer will we do that for bug fixes. The same is still true for features, although we stopped merging those some time ago.

We'd love for you to keep contributing and while we are not able to merge this to Umbraco 8, if this is still something you'd like to see in Umbraco 9, please take a look and either create an issue to say so or find an issue that already exists. We'll be happy to give you some input around how you can adjust your pull request to target Umbraco 9. Even better, it might be something that Umbraco 9 already does or has. In which case, enjoy!

Once again, a huge thank you for the time you have spent working with us.

#H5YR
Your friendly Umbraco GitHub bot 🤖 🙂

@umbrabot umbrabot closed this Feb 22, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants