fix!!: Use similar styling for Edit and Postpone buttons #2562
Conversation
|
@Cito Huge thanks for picking this up... Can I please check:
|
|
Oh wait, I see you have labelled it as a breaking change, so I did not need to ask... I'm happy for the styling of Postpone to change - as that is what was requested in the other issue. Sorry, but I'm not happy to change the Pencil styling though... |
|
If you still wanted to change the Pencil styling, then I trust your experience of the benefit ... Here is how I have documented breaking changes previously: So please could this PR include corresponding documentation similar to what was done in 3.0.0 - highlighting the change, and telling people how they should edit their CSS to retain their previous customisations... Thank you. |
claremacrae
added
the
scope: css styling
|
Ok, I can explain in the docs how to get the old look of the pencil back and to change the style of the fast forward button to unicolor as well. This will help those who really preferred the old look and at the same time give an example how to generally change the style. May take a few days since a busy work week is ahead, but it's on my list for this week. Btw, there are also two copies of the styles.css file (I think used for example and doc vaults) - should I adapt these as well or is there some automatism that copies the latest version over anyway? |
Brilliant - thank you very much.
Thank you.
OK.
Just change the one in the root... Periodically I use 'Update Plugins' in the sample vault to update it to the latest... (There's an issue for automating that process #2367 ) |
|
You probably know this, but in the new docs, just put in X.Y.Z as a placeholder for the next version number. |
|
@claremacrae I have added the requested documentation now |
claremacrae
changed the title
claremacrae
changed the title
|
On my Mac (Sonoma), the
The docs say it looks like this:
|
I wonder if the vault had customised the icons for the date emojis when the screenshots were made? I don't recognise that date icon. |
|
Thank you very much indeed for adding the docs and the CSS samples, @Cito. I had a quick experiment, planning to just merge it before taking some new screenshots and to include this in the next release.... It looks like I will need to recreate the screenshots in this PR before release though... and first I need to understand why the So I will do all this after the imminent release. |
|
@claremacrae I made the screenshots on Windows 11. Just tested on a Mac. It seems the "alt" characters are not implemented as glyphs on MacOs, probably since they were introduced only in Unicode 7. The default characters for edit and postpone are from Unicode 6 and work on MacOs and Android (just double-checked). I will add a remark that character glyphs (emojis) can look slightly different or not be supported on different platforms. |
|
Thank you. |
|
Ok, added some remarks in 0931a33 now. |
|
Btw, on this page you can see how the calendar icons appears on different devices. |
|
Just to say that I haven't forgotten about this... Getting sort by function good enough for release is taking much longer than I naively expected... |
There was a problem hiding this comment.
Hi @Cito, many thanks for this.
I really like the new options for button style.
No action needed on these comments from you - they are for me.
I've read through the changes... The notes added here are reminders of things for me to do after I've merged...
I will merge main in to your branch and resolve the conflicts, and then go ahead and merge the PR.
# Conflicts: # tests/ui/Menus/PostponeMenu.test.ts
|
Thanks a lot for caring, @claremacrae |
|
It's too late now, but looking at the default styling I only now noticed the horizontal alignment of the bottom of buttons. (Funny the things I don't notice until I use them with data I am actually working on, rather than purely testing....)
|
|
It's also entirely possible that the previous code was similarly aligned and I just never looked closely... |
|
I can take a look at the vertical alignments of everything if you think it's worth fixing. Just create a new dedicated issue linking to this comment and tag me. This does not need to hold up the next release. |
Description
This PR addresses issue #2517.
The problem here was that the "edit" and "postpone" buttons were created and styled very differently - one as an anchor element with an image mask to show the pencil icon and the other one as a button with a fixed unicode "fast forward" char as context.
Because of these difference, the two buttons had a different look (one faint text color, the other one colorful) and needed different CSS to style them. The hard-coded "fast forward" character was also difficult to change using CSS.
This PR changes the code and CSS file so that both buttons are created in a similar way, can be styled in a similar way, and both have a similar colorful look by default using unicode characters. The unicode characters used for the content of the buttons are not hard-coded, but can be modified using CSS.
I decided to use an anchor tag for both buttons because it can be styled more easily and with less interference by the browser, though a button might be more correct semantically.
You can change the used unicode character simply by changing the CSS content property, but it is also still possible to style the buttons using an image mask and setting the content to an empty string.
How has this been tested?
Manual testing on Windows 11.
Made sure that it looks ok and that using the buttons for tasks in a callout also works as expected.
Screenshots (if appropriate)
Types of changes
This change may break existing CSS snippets used to style the postpone and edit button.
Changes visible to users:
fix- non-breaking change which fixes an issue)feat- non-breaking change which adds functionality)feat!!orfix!!- fix or feature that would cause existing functionality to not work as expected)docs- improvements to any documentation content for users)vault- improvements to the Tasks-Demo sample vault)contrib- any improvements to documentation content for contributors - see Contributing to Tasks)Internal changes:
refactor- non-breaking change which only improves the design or structure of existing code, and making no changes to its external behaviour)test- additions and improvements to unit tests and the smoke tests)chore- examples include GitHub Actions, issue templates)Checklist
yarn run lint.Terms