Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Grid: Add button styling fix #10978

Merged
merged 13 commits into from
Sep 21, 2021
Merged

Grid: Add button styling fix #10978

merged 13 commits into from
Sep 21, 2021

Conversation

BatJan
Copy link
Contributor

@BatJan BatJan commented Aug 30, 2021

Prerequisites

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

Description

With the current release of version 8.16 I noticed the "Add button" in the grid was no longer a perfect square after the icon was converted to using the <umb-icon> directive. That's addressed with a few tweaks to the .iconBox class in this PR.

Furthermore some unused classes and uneeded CSS properties have been removed 😃

Before
plus-button-before

After
plus-button-after

@bjarnef
Copy link
Contributor

bjarnef commented Aug 30, 2021

Another thing that is redundant is setting border-color here and then override it right after on next line 😅

border-color: @gray-7 @gray-7 @gray-6;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);

Although some very old browsers didn't support rgba in CSS, it probably isn't relevant anymore. https://caniuse.com/?search=rgba

@BatJan
Copy link
Contributor Author

BatJan commented Aug 30, 2021

@bjarnef Ah yes, removed that as well now 👍🏻 All the browsers that Umbraco aim to support has rgba() support for a long time so no worries about that one 😃

@umbrabot
Copy link

umbrabot commented Aug 30, 2021

Hi there @BatJan, thank you for this contribution! 👍

While we wait for one of the Core Collaborators team to have a look at your work, we wanted to let you know about that we have a checklist for some of the things we will consider during review:

  • It's clear what problem this is solving, there's a connected issue or a description of what the changes do and how to test them
  • The automated tests all pass (see "Checks" tab on this PR)
  • The level of security for this contribution is the same or improved
  • The level of performance for this contribution is the same or improved
  • Avoids creating breaking changes; note that behavioral changes might also be perceived as breaking
  • If this is a new feature, Umbraco HQ provided guidance on the implementation beforehand
  • The contribution looks original and the contributor is presumably allowed to share it

Don't worry if you got something wrong. We like to think of a pull request as the start of a conversation, we're happy to provide guidance on improving your contribution.

If you realize that you might want to make some changes then you can do that by adding new commits to the branch you created for this work and pushing new commits. They should then automatically show up as updates to this pull request.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

Copy link
Member

@nul800sebastiaan nul800sebastiaan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@BatJan Could package developers be using .umb-grid .iconBox i? Cleaning up is great but we have to consider who else is using our styling. :-)

@BatJan
Copy link
Contributor Author

BatJan commented Aug 31, 2021

@nul800sebastiaan Good catch! Reverted now 👍🏻

Copy link
Contributor

@nathanwoulfe nathanwoulfe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me, thanks @BatJan

@nathanwoulfe
Copy link
Contributor

@nul800sebastiaan I've labelled this for 8.17 - is it possible to cherry pick for that release or will it need to wait? Not a big issue, but would be good to resolve.

@nathanwoulfe
Copy link
Contributor

Failed test isn't related to this change

@nathanwoulfe nathanwoulfe merged commit 31ecc14 into umbraco:v8/contrib Sep 21, 2021
nul800sebastiaan pushed a commit that referenced this pull request Sep 22, 2021
* Add missing focus styling

* Ensure add button is perfectly rounded and remove unused / uneeded CSS.

* Remove redundant border-color property

* Revert removal of unused css

Co-authored-by: BatJan <[email protected]>
Co-authored-by: Jan Skovgaard Olsen <[email protected]>
(cherry picked from commit 31ecc14)
@nul800sebastiaan
Copy link
Member

Cherry picked for 8.17 in e269d1b

bergmania added a commit that referenced this pull request Oct 20, 2021
* Adjust icon in umb-checkbox and ensure icon is centered

* Missing nl translation for blockEditor_addBlock

* Implement icon parameter for doctype editor (#11008)

* fix: implement icon parameter for doctype editor

issue #10108

* fix: move color from icon to class attribute

* fix: removed defined colors, defaulting to the standard dark grey (ie "no color picked" in icon picker)

* cleaned up unused dependencies, double quotes to single, removed unused 'color' param from the create methods, and use shorthand object creation in createDocType (if the key has the same name as the variable passed as a prop, we only need to pass the key name)

* fix comment

Co-authored-by: Nathan Woulfe <[email protected]>

* Align sortable handle vertically in multivalues prevalue editor

* 10341: Use different picker for content types (#10896)

* 10341: Use different picker for content types

* use es6 where possible (inc removing underscore for teeny tiny performance improvement)

Co-authored-by: Nathan Woulfe <[email protected]>

* Falling back to contentTypeName when Block List label is empty (#10963)

* Falling back to contentTypeName when Block List label is empty

* Adding $contentTypeName variable for Block List labels

* Fix incorrect attribute

* Grid: Add button styling fix (#10978)

* Add missing focus styling

* Ensure add button is perfectly rounded and remove unused / uneeded CSS.

* Remove redundant border-color property

* Revert removal of unused css

Co-authored-by: BatJan <[email protected]>
Co-authored-by: Jan Skovgaard Olsen <[email protected]>

* Create content template localization (#10945)

* Don't use self-closing element for custom HTML elements

* Use button element for close/cancel in copy dialog

* Update localization of "createBlueprintFrom"

Co-authored-by: Nathan Woulfe <[email protected]>

* Cleanup examine search results, and adds ability to toggle fields (#9141)

* Cleanup examine search results, and adds ability to toggle fields

* update table to use joinarray filter with one-time binding to avoid recalculating filter values, updated filter to not explode when array arg is null

* fix failing tests - improve filter to not fail on non-array params, update tests accordingly

Co-authored-by: Nathan Woulfe <[email protected]>

* Add EntityController GetUrlsByUdis

Enables loading multiple URLs in a single request for Media & Documents

* Update content picker to use GetUrlsByUdis

* Allows replacing MainDom with alternate DB

There are some cases where there is a complex hosting strategy and folks want a readonly database and are hosting on Azure. In that case, it is not entirely possible to have a readonly Umbraco database because SqlMainDom is required and part of that requirement is to have read/write access to the umbraco key value table.
This PR allows for the default MainDom to be replaced and to allow for an SqlMainDomLock to use an alternate connection string so that a separate read/write database can be used.

* Remove inherited property group id/key when local properties are added (#11231)

* Remove inherited property group id/key when local properties are added

* Rebind saved content type values

* Remove inherited from save group

* Rename parameter for clarity

* Removes annoying wait text, which causes layout jank

* v8: Backoffice Welsh language translation updates (#11240)

* Updated the Welsh language file to include newly added keys (based on the en us language file)

* Updated the searchInputDescription key

* Updated the endTitle key

* Use medium sized overlay

* Use umb-icon component for icons in content type groups and tabs

* fixes wrong reference to enterSubmitFolder method in ng-keydown

* 11251: Don't add default dashboard to url

* Fix preview of SVG when height and width not are set

* If caching a published document, make sure you use the published Name… (#11313)

* If caching a published document, make sure you use the published Name. Closes #11074.

* Fix case of new node

Co-authored-by: Moore, Douglas S <[email protected]>

* Added missing Italian translations (#11197)

* Resolve incorrect ContentSavedState for failed publish

Closes #11290 (for v8)

* add modelValue validation for server to correctly update validation errors

* 11048: Bugfix for groups and properties that get replaced (#11257)

(cherry picked from commit 1605dc1)

* Icon fallback to `icon-document` for existing document types (#11283)

* Align create buttons styling (#11352)

* Added button for cancelling dictionary create action

* Use hideMenu

* Align dictionary create with the other creates

* Align import documenttype

* Align for data type folder create

* Align document type create buttons

* Forgot small ng-show

* Align create media folder buttons

* Align create macro buttons

* Align create relation buttons

* Align create partial view macro folder buttons

* Align partial view folder create buttons

* Align create scripts folder buttons

* Align create scripts folder buttons

* Use primary instead of success

* V8: Duplicate MemberGroup names cause MemberGroup mixup (#11291)

* Prevented duplicate member group names

* Added English lang

* Updated 'Exist' typo

* add labels in FR and NL

* Adding property group aliases to ex.message

* Adding invalid prop group aliases as ModelState errors, so we don't introduce breaking changes

* Pointing the actual reason for invalidating composition

* Validate all content type dependencies and throw a single InvalidCompositionException

* Rename based on review comments

* Update composition validation error messages

* Update InvalidCompositionException message

* Allow switching property editor from numeric to slider (#11287)

* Make it possible to change from numeric/decimal property editor to slider without breaking editor

* Formatting

* Enables friendly pasting in multipletextbox

* UI API docs: Added reset rules for .close class

* UI API docs: Fixed incorrect method name

* 11331: Check property on instance if id is not set yet

* Fixed cypress tests

Co-authored-by: Bjarne Fyrstenborg <[email protected]>
Co-authored-by: Corné Strijkert <[email protected]>
Co-authored-by: Søren Gregersen <[email protected]>
Co-authored-by: Nathan Woulfe <[email protected]>
Co-authored-by: patrickdemooij9 <[email protected]>
Co-authored-by: Callum Whyte <[email protected]>
Co-authored-by: Jan Skovgaard <[email protected]>
Co-authored-by: BatJan <[email protected]>
Co-authored-by: Jan Skovgaard Olsen <[email protected]>
Co-authored-by: Søren Kottal <[email protected]>
Co-authored-by: Paul Johnson <[email protected]>
Co-authored-by: Shannon <[email protected]>
Co-authored-by: Sebastiaan Janssen <[email protected]>
Co-authored-by: Ronald Barendse <[email protected]>
Co-authored-by: Owain Jones <[email protected]>
Co-authored-by: Mole <[email protected]>
Co-authored-by: Doug Moore <[email protected]>
Co-authored-by: Moore, Douglas S <[email protected]>
Co-authored-by: Martino Gabrielli <[email protected]>
Co-authored-by: Nikolaj Geisle <[email protected]>
Co-authored-by: Mads Rasmussen <[email protected]>
Co-authored-by: Jamie Townsend <[email protected]>
Co-authored-by: Elitsa Marinovska <[email protected]>
Co-authored-by: Anders Bjerner <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants