Up button revamp #82

Tweekism · 2024-07-13T08:28:49Z

Close #81

Hey mate,

Not sure if you want it, but I've set mine up like this. I mean we can always make it more pretty later right?

Tweekism · 2024-07-13T08:33:56Z

Would the dirParent function be better in the utils/path.ts file, I can move it if you prefer. Or just tell me to go away lol.

jannis-baum · 2024-07-13T09:20:18Z

Thanks for the PR! I like the idea of having the option to include the name of the parent directory. I would wrap it in a span with a class name so that custom CSS can hide it again though, just keeping options open for the user :)

Let me think about this for a bit and then I'll make a suggestion for something in between this and what we had before

Tweekism · 2024-07-13T09:58:02Z

I'm no HTML5 / CSS expert, could you do something with data attributes like:-

<a id="parent-dir" data-parent-folder="${dirParent(path)}" href="${pathToURL(pdirname(path))}" />

And then the user in CSS could go something like:-

a#parent-dir { content: "🠈 "attr(data-parent-folder) ; }

jannis-baum · 2024-07-13T10:28:35Z

I'm no HTML5 / CSS expert, could you do something with data attributes like:-
<a id="parent-dir" data-parent-folder="${dirParent(path)}" href="${pathToURL(pdirname(path))}" />
And then the user in CSS could go something like:-
a#parent-dir { content: "🠈 "attr(data-parent-folder) ; }

This makes you more of a CSS/HTML5 expert than me, lol. I didn't know about this, looks very cool!

Tweekism · 2024-07-13T10:40:10Z

Yeah it didn't work when i tried it tho lol.

Tweekism · 2024-07-13T13:15:37Z

Ok it actually does work, but I noticed there are 3 <a> tags with the parent-dir id

Solutions would be remove the extra 2 <a> so there is only one parent-dir id, or make parent-dir a class and make a new id back-link just for the back button

This otherwise solves the the issue of letting the default style be exactly as it was while also letting custom css do its magic.

Let me know your thoughts.

EDIT: Oh and yeah, solution 3: use a <span>

EDIT2: Ignore all this, all sorted, the dynamic TypeScript section really didn't like me using a self-closing <a /> tag

Tweekism · 2024-07-13T15:35:26Z

Ok so here is what I have...

For the default style sheet, nothing layout wise has changes except by default the opacity is now 30%. You can set this back to zero in your custom css

As seen below that is just barely visible on the dark theme and we can tweak this over time of course and per theme with the @media (prefers-color-scheme: light) selectors.

With cursor hovering over, opacity is 100% as before...

AND then, with just a little bit of custom css you can do this...

a#parent-dir {
    position: static;
    background-color: transparent;
    opacity: 1;
}

a#parent-dir::after {
    content: "🠄 "attr(data-parent-folder);
}

Let me know what you think.

Tweekism · 2024-07-13T15:59:24Z

Also let me know if you need me to change any of those commit messages or move that helper function to utils etc.

jannis-baum · 2024-07-13T17:29:02Z

Nice, thanks! Looks cool on first sight! I'll try and check it out tomorrow. Until then it would be great if you could rebase onto main (we just merged another PR) and edit your second commit message to be "conventional" as well, e.g. feat(#82): option for name of parent directory in back button :)

…etParentName

Tweekism · 2024-07-14T04:11:07Z

Hey mate,

I've made those changes but i haven't been able to test it properly yet. When all your changes came down something happened to my yarn dev thing and it broke. Going to go have a look at that now.

Edit: Also wasn't sure what your naming convention is for functions and what not. Most look like a simple verbNoun pair so I went with that.

…ut options This will allow you to align with the body-content section and help contain any custom css the user tries to inject using the ::before and ::after pseudo element selectors Example custom css:- div#parent-dir-content { max-width: 900px; margin: auto; text-align: right; } a#parent-dir { position: static; background-color: transparent; opacity: 1; } a#parent-dir::after { content: "🠄 "attr(data-parent-folder); }

Tweekism · 2024-07-14T06:06:51Z

Yeah UI design is clearly not my thing.

I do think we'll need to wrap the back link in a div or something, to contain it and enable more layout options. Then you can setup your max-width to match the body-content etc.

something like:-

div#parent-dir-content {
    max-width: 900px;
    margin: auto;
    text-align: right;
}

a#parent-dir {
    position: static;
    background-color: transparent;
    display: static;
    opacity: 1;
}

a#parent-dir::after {
    content: "🠄 "attr(data-parent-folder);
}

jannis-baum · 2024-07-14T08:49:40Z

Hey mate,

I've made those changes but i haven't been able to test it properly yet. When all your changes came down something happened to my yarn dev thing and it broke. Going to go have a look at that now.

Oh, sorry about that! Were you able to resolve this? Maybe it's just running just yarn one time to update your locally installed packages according to the changes?

Edit: Also wasn't sure what your naming convention is for functions and what not. Most look like a simple verbNoun pair so I went with that.

We don't have anything super fixed, what you say sounds good! Do you think this is something we should define, e.g. in the contribution guide?

jannis-baum · 2024-07-14T08:54:01Z

By the way I think this attr(data-parent-folder) thing is not something people will figure out by themselves ^^ So I think we need some way of documenting/suggesting it.

First thought that comes to my mind would be opening a pinned "customization" discussion or something where people can share stuff they did to/with their Vivify. And then linking to it from the README. What do you think?

Tweekism · 2024-07-14T09:34:17Z

Oh, sorry about that! Were you able to resolve this? Maybe it's just running just yarn one time to update your locally installed packages according to the changes?

Yeah I figured it out pretty quick, I needed to bring down your new dependencies and something just got stuck. A reboot sorted it out though.

We don't have anything super fixed, what you say sounds good! Do you think this is something we should define, e.g. in the contribution guide?

No I don't think so at this stage. No one wants to read 20 pages of rules before they can look at the code. Once the code grows at bit there will be more examples to look at.

By the way I think this attr(data-parent-folder) thing is not something people will figure out by themselves ^^ So I think we need some way of documenting/suggesting it.

First thought that comes to my mind would be opening a pinned "customization" discussion or something where people can share stuff they did to/with their Vivify. And then linking to it from the README. What do you think?

So I've been thinking about this, I'm actually leaning towards your original idea and just putting the back icon and text into separate spans and calling it a day.

Then users can just toggle them on or off in CSS making the 90% of use cases a lot more discoverable. Those in the know can still use ::before and ::after to insert a custom icon if they want to, and maybe we document that.

I'd like to avoid the trap of over complicating things with extra customization options that no one really uses as each one comes with an additional maintenance overhead (I'm looking at you KDE devs).

Maybe we could include an example or two custom css files somewhere for people to look at?

Tweekism · 2024-07-14T10:08:31Z

Oh also, could you let me know which back button style you were wanting to use for the default.

I assumed it was the current fixed position button in the corner. I have an uncommitted change here that cleans up the look a little bit for it (see below).

Or I could set the default to my text based version that is aligned with the body text at the top of the page.

Could you let me know which one you want?

Or the text based (you've seen before) there is still some tightening up of the layout to be done here but you get the general idea)

jannis-baum · 2024-07-14T11:06:38Z

Could you let me know which one you want?

I think the more sensible default is to have the text displayed. But I think I would prefer having it all the way on the left like the button we had before instead of aligned with the document.

Since it will then always be visible let's also hide the button if we're already at the root directory.

By the way, I like this arrow that you have in your example but what kind of character is it? If it's this one 🠄 (copied from your code sample) I think we have to use a more standard one because it doesn't display on my system: GitHub shows empty space, in other places I get a question mark in a box.

Tweekism · 2024-07-14T11:40:02Z

I think the more sensible default is to have the text displayed. But I think I would prefer having it all the way on the left like the button we had before instead of aligned with the document.

Ok, I will have to lock in some space for it and will need to tidy up how the wrapping looks, otherwise it overlaps on to the body text when there are longer directory names on smaller monitors.

...let's also hide the button if we're already at the root directory.

Can do, I was limiting my changes to the CSS, but I'm happy to do it.

By the way, I like this arrow that you have in your example but what kind of character is it? If it's this one 🠄 (copied from your code sample) I think we have to use a more standard one because it doesn't display on my system: GitHub shows empty space, in other places I get a question mark in a box.

I just picked one at random that looked nice, its this one from the unicode specification but its way down the list. Specifically the Unicode 7.0 spec from 2014. I'll look for a more compatible one.

I assume there is no rush for this on your end? I'd like to just poke at it now for a couple days after work and stuff...

jannis-baum · 2024-07-14T11:51:04Z

Ok, I will have to lock in some space for it and will need to tidy up how the wrapping looks, otherwise it overlaps on to the body text when there are longer directory names on smaller monitors.

True, I didn't consider this. Then I guess let's just do what you had in the screenshot ^^ Might look weird otherwise.

I just picked one at random that looked nice, its this one from the unicode specification but its way down the list. Specifically the Unicode 7.0 spec from 2014. I'll look for a more compatible one.

Yeah, weird, I don't know why Apple doesn't like that one haha. If I search for "leftwards arrow" everything from U+1F800 and after as well as U+2BA8 and U+2BAA aren't compatible for me. All the others work :)

I assume there is no rush for this on your end? I'd like to just poke at it now for a couple days after work and stuff...

No rush at all, take your time! We will hopefully release version 0.2.0 soon but if this isn't finished by then we can just do 0.2.1 :)

tuurep · 2024-07-14T14:13:49Z

I see the 🠄 arrow, by the way :D

Maybe that depends on your font?

Tweekism · 2024-07-14T15:30:47Z

Yeah it'll be a font thing, unicode has got so big and complicated with so many code points font makers can't make them all.

I'll probably make a little .svg to put there. 😅

tuurep · 2024-07-14T15:53:44Z

On Linux I've usually fixed problems like this by installing fonts that cover a wide range of unicode/emoji that act as fallback fonts

Specifically Noto, Noto CJK and Noto Emoji

jannis-baum · 2024-07-14T18:44:11Z

Maybe that depends on your font?

On Linux I've usually fixed problems like this by installing fonts that cover a wide range of unicode/emoji that act as fallback fonts

Yes, probably. I think on macOS I can't pick a system font lol. But it's for the better; if I used Linux I would never leave the house again because the only thing I would do is customize my computer hahahaha it's already bad enough even with the restrictions I have on macOS

I'll probably make a little .svg to put there. 😅

I like the dedication! haha

tuurep · 2024-07-14T19:26:53Z

Can confirm not leaving the house for that reason but also shocked that you can't change the font 😄

Tweekism · 2024-07-28T07:43:23Z

Ok there is enough here now for anyone who wants to have a look.

Note that I haven't removed the old button yet, will do that before merge.

This is the wrapping behaviour, it now wraps on contact with the link (plus a small margin) instead of the edge of the content div, otherwise it is the same.

This is enabled for markdown, notebooks, and text rendering.

And this is the directory listing

It doesn't have a custom icon yet.

@jannis-baum we talked about swapping these out for some .svg icons. With your permission, I'd like to work on that next as its own issue? Its a huge boon to my motivation to get smaller chunks completed / merged more often.

Not being a web dev guy, everything takes way longer than it should. I probably spend equal time fixing my tooling and pacing around my office as I do actually contributing to the issue haha.

Oh and btw, can you both let me know if you can render this character in your browsers? --> ◂

Should look like this:-

Tweekism · 2024-07-28T07:45:52Z

@jannis-baum Oh, and please let me know what javascript/typescript sins I have made :)

jannis-baum · 2024-07-28T08:25:28Z

Hello! This looks really good on your screenshots! I like the up button for directories as it is but I think the one for files only works well when the first thing on the file is a headline.

If I start a Markdown file with a paragraph it's a bit off

and for a Notebook starting in a code cell as well

Maybe we could put it above the content as you had it at some point? What do you think?

@jannis-baum we talked about swapping these out for some .svg icons. With your permission, I'd like to work on that next as its own issue? Its a huge boon to my motivation to get smaller chunks completed / merged more often.

Yes, definitely! 100% with you on this. Feel free to work on #102 next if you want :)

Not being a web dev guy, everything takes way longer than it should. I probably spend equal time fixing my tooling and pacing around my office as I do actually contributing to the issue haha.

Haha yes, I get this, I usually also try to only touch web development with a 3m pole while closing my eyes hahaha, for Vivify it just seemed like the sensible thing to do😂

Oh and btw, can you both let me know if you can render this character in your browsers? -→ ◂

Works for me!

@jannis-baum Oh, and please let me know what javascript/typescript sins I have made :)

I'll have a look at the code later😁

Tweekism · 2024-07-28T08:57:57Z

Yeah I noticed that on one of my notes (markdown notes) that didn't have a header. I don't have a plan how fix that yet, will need to think about it.

The other bug, and you should test this on your browser, is on .ipynb notebooks the link isn't clickable, seems like something is covering it? If you unfloat it it becomes clickable......

jannis-baum · 2024-07-28T10:14:17Z

Yeah I noticed that on one of my notes (markdown notes) that didn't have a header. I don't have a plan how fix that yet, will need to think about it.

Oki no worries. I also liked your original idea of putting it above the start of the content. You don't like that one anymore?

The other bug, and you should test this on your browser, is on .ipynb notebooks the link isn't clickable, seems like something is covering it? If you unfloat it it becomes clickable......

Ah, yes, I hadn't tried that. It's probably because of the position: relative that the code cells have. Anyways, there should be a better way than to use float as this is considered a legacy technique now: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats#the_background_of_floats

Tweekism · 2024-07-28T11:25:00Z

Oki no worries. I also liked your original idea of putting it above the start of the content. You don't like that one anymore?

Ok lets just to that, thats easy. Do you like left or right better?

putting it down in the header is difficult because thats rendered by the external library, and then as you noticed, you are not always guaranteed to even have a header.

I guess you could do some javascript to detect if the first line was a header or not and then position accordingly, but for now, i'm happy with this...

jannis-baum · 2024-07-28T11:45:04Z

Ok lets just to that, thats easy. Do you like left or right better?

Sounds good! I'd say left. I think that's the more conventional location where people would expect an up/back button

tuurep · 2024-07-28T12:58:16Z

Oh and btw, can you both let me know if you can render this character in your browsers? --> ◂

Yes this renders for me

SVG icons should be good and straight forward right now, if we have agreed on the Octicons and maybe color them like GitHub does. Once again, what dark theme colors...? 😄

jannis-baum · 2024-07-28T13:00:15Z

SVG icons should be good and straight forward right now, if we have agreed on the Octicons and maybe color them like GitHub does. Once again, what dark theme colors...? 😄

Let's discuss in #102!

Tweekism · 2024-07-28T13:11:17Z

Just playing few games with some friends at the moment, in about 30 mins I'll go de-float this 😊

…tom .css

Tweekism · 2024-07-28T14:30:51Z

Ok nav is back at top, defaults to the left.

I'm weird, kinda like it on the right, so I wrapped it in a <div> to make it easy to move around in custom .css.

Also have removed the old / original button.

jannis-baum

Looks good. Just that small thing but afterwards we can merge :)

src/parser/parser.ts

jannis-baum · 2024-07-29T05:35:42Z

Good work! Thank you!

tuurep · 2024-07-29T15:47:22Z

Sorry to bother after merge but gonna give an opinion on this:

.. directory a nice idea for dir list
I think that (parent) looks redundant as the same info is always on the path on the top. Also looks quite unholy.

The benefit of it is that the .. is a tiny target to click and that makes it bigger

But what I would do instead is make the directory icon clickable as part of the link (which isn't currently)

jannis-baum · 2024-07-29T15:50:04Z

Also looks quite unholy.

Hahaha yes a bit.

But what I would do instead is make the directory icon clickable as part of the link (which isn't currently)

This sounds good! Maybe we do it in the context of #102? Or do you think it's more urgent and should happen ASAP? If so feel free to open a PR and patch it ^^

tuurep · 2024-07-29T16:01:39Z

Yeah with #102 is totally fine!

Tweekism · 2024-07-29T18:32:01Z

The benefit of it is that the .. is a tiny target to click and that makes it bigger

But what I would do instead is make the directory icon clickable as part of the link (which isn't currently)

You summed it up quite perfectly. I never actually said it, but that was my plan.

jannis-baum mentioned this pull request Jul 13, 2024

Up button visibility & text #81

Closed

Tweekism force-pushed the issue/81-consider-unhiding-back-button branch 2 times, most recently from 4111769 to 0873547 Compare July 13, 2024 15:34

Tweekism force-pushed the issue/81-consider-unhiding-back-button branch from 0873547 to 4d876ea Compare July 14, 2024 04:08

Tweekism added a commit to Tweekism/vivify that referenced this pull request Jul 14, 2024

feat(jannis-baum#82): option for name of parent directory in back button

7cfbdae

Tweekism added a commit to Tweekism/vivify that referenced this pull request Jul 14, 2024

feat(jannis-baum#82): refactor dirParent func into utils/path.ts as g…

4d876ea

…etParentName

Tweekism force-pushed the issue/81-consider-unhiding-back-button branch from d24df1b to 34bad15 Compare July 28, 2024 04:36

Tweekism added 2 commits July 28, 2024 17:05

feat(jannis-baum#81): add up navigation to the directory renderer

e0e371c

feat(jannis-baum#81): add up navigation to content renderers

1f19f5a

Tweekism force-pushed the issue/81-consider-unhiding-back-button branch from 34bad15 to 1f19f5a Compare July 28, 2024 07:06

jannis-baum mentioned this pull request Jul 28, 2024

SVG icons #102

Closed

Tweekism added 2 commits July 29, 2024 00:23

feat(jannis-baum#81): move navigation to top and inside <div> for cus…

420640b

…tom .css

feat(jannis-baum#81): remove old up/back button

dd1e205

Tweekism marked this pull request as ready for review July 28, 2024 14:31

jannis-baum requested changes Jul 28, 2024

View reviewed changes

src/parser/parser.ts Outdated Show resolved Hide resolved

jannis-baum reviewed Jul 28, 2024

View reviewed changes

src/parser/parser.ts Outdated Show resolved Hide resolved

feat(jannis-baum#81): minor fixes from review feedback

5a27356

Tweekism requested a review from jannis-baum July 29, 2024 00:03

jannis-baum approved these changes Jul 29, 2024

View reviewed changes

jannis-baum merged commit e15b5b4 into jannis-baum:main Jul 29, 2024
5 checks passed

Up button revamp #82

Up button revamp #82

Conversation

Tweekism commented Jul 13, 2024 • edited by jannis-baum Loading

Tweekism commented Jul 13, 2024 • edited Loading

jannis-baum commented Jul 13, 2024

Tweekism commented Jul 13, 2024

jannis-baum commented Jul 13, 2024

Tweekism commented Jul 13, 2024

Tweekism commented Jul 13, 2024 • edited Loading

Tweekism commented Jul 13, 2024

Tweekism commented Jul 13, 2024

jannis-baum commented Jul 13, 2024

Tweekism commented Jul 14, 2024 • edited Loading

Tweekism commented Jul 14, 2024

jannis-baum commented Jul 14, 2024

jannis-baum commented Jul 14, 2024 • edited Loading

Tweekism commented Jul 14, 2024

Tweekism commented Jul 14, 2024

jannis-baum commented Jul 14, 2024

Tweekism commented Jul 14, 2024

jannis-baum commented Jul 14, 2024

tuurep commented Jul 14, 2024

Tweekism commented Jul 14, 2024

tuurep commented Jul 14, 2024

jannis-baum commented Jul 14, 2024

tuurep commented Jul 14, 2024

Tweekism commented Jul 28, 2024

Tweekism commented Jul 28, 2024

jannis-baum commented Jul 28, 2024

Tweekism commented Jul 28, 2024

jannis-baum commented Jul 28, 2024

Tweekism commented Jul 28, 2024

jannis-baum commented Jul 28, 2024

tuurep commented Jul 28, 2024

jannis-baum commented Jul 28, 2024

Tweekism commented Jul 28, 2024

Tweekism commented Jul 28, 2024 • edited Loading

jannis-baum left a comment

Choose a reason for hiding this comment

jannis-baum commented Jul 29, 2024

tuurep commented Jul 29, 2024

jannis-baum commented Jul 29, 2024

tuurep commented Jul 29, 2024

Tweekism commented Jul 29, 2024

Tweekism commented Jul 13, 2024 •

edited by jannis-baum

Loading

Tweekism commented Jul 13, 2024 •

edited

Loading

Tweekism commented Jul 13, 2024 •

edited

Loading

Tweekism commented Jul 14, 2024 •

edited

Loading

jannis-baum commented Jul 14, 2024 •

edited

Loading

Tweekism commented Jul 28, 2024 •

edited

Loading