Design - bookmarksPopover #122

Mehrabbruno · 2022-09-07T20:45:54Z

Mehrabbruno · 2022-10-05T07:09:00Z

Worklog

Worklog 1 2022.10.21

Tasks

done Design - Bookmarked pop-over (toggles on onClick) - 1min
- done pop-over header (fixed to the top and contains bookmarked title, total number of bookmarked tabs and close button) - 1min
- done Bookmarks container (contains application logo, title, and remove button) - 1min
- done Search input (contains search icon, inputField and close icon when added text) - 1min
- done Record an explanatory video for Bookmars Popover Component and add it in the header description - 1min
- @output 📦 bookmarksPopover_v0.0.1

serapath · 2022-10-22T00:43:00Z

feedback 2022.10.22

This one for bookmarks should look like a file explorer with the current bookmark highlighted.

Mehrabbruno · 2022-10-30T21:24:50Z

Worklog

worklog-1 2022.10.31

Tasks

done Design - bookmarksPopover_v0.0.2 - 20min
- done remove header, and footer from the component.
- done place the content inside the Design - popoverContainer #125 content body
- @output 📦 bookmarksPopover_v0.0.2

serapath · 2022-10-31T21:04:47Z

feedback 2022.10.31

Regarding the bookmark and how i imagine it, i recorded a short screencast
https://share.vidyard.com/watch/MjmwyDuz7o386C4MwZE12n?

But I assume what you are referring to is the issue that one single "bookmark" or in general any file or folder that is "symlinked" under more than one folder, but also all the entries inside a "tile json" file themselves, they can have "multiple parents"

In that case - there is already a solution that i have been working on with david for quite some time now, but in the context of something we call a task messegner which is actually the wireframes for the tool or app that is supposed to replace our github/youtube workflow in the future.

In essence it looks and works like the following:

---------------------------------------
FILE EXPLORER:
---------------------------------------

🏰┬🗝root
  └📂┬🗂️🧙user
     ├📂┬🗂️🪦tomb
     │  ├📁─🗄️repo3
     │  └📂┬🔐org3
     │     └📁─🗄️repo1
     │
     ├📁─🗂️🗄️repo1
     ├📁─🗂️🗄️user
     │
     │  ┌⚓📁─🔐orgX
     │  ├📎🧙user
     ├📂┼🗂️🔐org1
     │  ├📁─🗂️🪦tomb
     │  ├📁─🗂️🗄️org1
     │  └📁─🗂️🗄️repo1
     │
     └📂┬🗂️─🗂️🔓org2
        ├📁─🗂️🪦tomb
        ├📁─🗂️🗄️repo1
        ├📁─🗂️🗄️repo2
        ├📁─🗂️🗄️org2
        ├📂┬🗂️🔐org2a
        │  ├📁─🗂️🪦tomb
        │  ├📁─🗂️🗄️repo1
        │  └📁─🗂️🗄️repo2
        └📂┬🗂️🔐org2b
           ├📁─🗂️🪦tomb
           │  ┌⚓📁─🗂️🗄️orgA
           │  ├⚓📁─🗂️🗄️orgB
           │  ├⚓📁─🗂️🗄️orgC
           │  ├⚓📁─🗂️🗄️orgD
           └📂┼🗂️🗄️repo1
              ├📂┼📂ties
              ├📂┼📂ring
              │  ┌⚓📁─🗂️🗄️repoZ/📄package.json
              │  ├📁─🗂️🗄️repo2#12/📄package.json
              ├📂┼📂📄package.json
              │  ├📁─🗂️🗄️repo1
              │  └⚓📁─🗂️🗄️repoY
              ├📂─🗂️📄README.md
              ├📂─🗂️📄index.htm
              └📂─📂src

---------------------------------------
BOOKMARKS:
---------------------------------------

🧲📂┬🗂️org2b
    │  ┌⚓📁─🗂️🗄️orgA
    │  ├⚓📁─🗂️🗄️orgB
    │  ├⚓📁─🗂️🗄️orgC
    │  ├⚓📁─🗂️🗄️orgD
    └📂┼🗂️🗄️repo1
       ├📂┼📂ties
       ├📂┼📂ring
       │  ┌⚓📁─🗂️🗄️repoZ/📄package.json
       │  ├📁─🗂️🗄️repo2/📄package.json
       ├📂┼📂📄package.json
       │  ├📁─🗂️🗄️repo1
       │  └⚓📁─🗂️🗄️repoY
       ├📂─🗂️📄README.md
       ├📂─🗂️📄index.html
       └📂─📂src

---------------------------------------

    ┌⚓📁─🗂️🔒orgX
    ├📎🧙user
🧲📂┼🗂️🔐org1
    └📁─🗂️🗄️repo1

---------------------------------------

    ┌🏰┬🗝root
    │  └📎🧙user
🧲📂┼📂🧙user
    ├📁─🗂️🗄️repo1
    ├📁─🗂️🗄️user 
    │  ┌⚓📁─🗂️orgX
    │  ├📎🧙user
    ├📂┼📂org1🔗
    │  └📁─🗂️repo1
    └📂┬🗂️─🗂️org2
    
---------------------------------------

This is not the latest or fully featured or perfect example.
We use it so it is terminal compatible and works purely with emojis too.

Now regardless of how this could be nicer themed or improved by using a better set of icons or changing the formatting slightly, the main feature is, that each entry can potentially be expanded in 2 directions.

Depeding on where you started (e.g. a bookmark (= 🧲) or the normal file exporer, there is always one main line of expansion.

The difference can be seen in the following example coped from above:

A

    ┌🏰┬🗝root
    │  └📎🧙user
🧲📂┼📂🧙user
    ├📁─🗂️🗄️repo1
    ...

vs.

B


🏰┬🗝root
  └📂┬🗂️🧙user
     │ ...
     ├📁─🗂️🗄️repo1
     ...

B is the main file explorer, so root/user is a sub folder and root/user/repo1 is a sub sub folder.
But in bookmark A it starts with user, so user/repo1 is a sub folder, but user\root is a super folder

This means, you can technically expand in endless loops.
If / means sub folder
and \ means super folder
you could go root/user/repo1\user/repo1\user\root/user/repo1\user/....

But the 📎 icon always appears in front of an icon when the visible item, e.g.

└📎🧙user

is already expanded and visible in the current structure, so the user knows they are now starting to expand in a loop if they continue - which they might anyway for temporary convenience reasons or whatever... it is up to them.

solution

So it is easy to choose an emoji for links and for tile json files and then add those types of entries to the above structure, but use the same expansion mechanism that allows to go in both directions.

Mehrabbruno · 2022-11-02T22:55:45Z

Worklog

Worklog - 80 [2022 Oct 22]

Task

Design - bookmarksPopover_v0.0.3
- discussion on new bookmarkPopoverDesign - 36min

Proposed Tasks

Feedback

I agree that the design look similar to the file explorer popover but the functionality of the bookmark popover is different.

You mentioned the user can navigation the parent and the child directories from the bookmarked file or folder.
My argument for that is "Why?". If I only care about specific folder or a file. Why would I want to see navigation anything around that?
In a scenario where the user only want to bookmark the .html files from the whole directory. They will create their own folder of let's name it html files. and in that folder they will place the .html files as bookmarked. The folder which the user created are represented with the image below. When the user click html files tab here, they will get the bookmarkPopover containing only the files that they have bookmarked. nothing else, because that's what all they care about. easy accessibility to the specific files they care about. not what around that or the parent folder.
In cases when the user saved/bookmarked a whole tile or a tile json file. That will be represented with the image below. Yes, this look familiar to the file explorer but the purpose is different. I only allow's user to see what's inside that tile json file. not what it's parent contains. Multiple tile json file, and application files etc can coexist next to each other even if they are from different destination. How they are placed is decided and customized by the user.

serapath · 2022-11-05T19:02:49Z

feedback 2022.11.05

Beinb able to know the parents of a bookmarked issue is important and the main issue why we can't re-use an existing file explorer component.

The problems with traditional file explorer components

you cant know all specific "folders" where a specific file is linked/bookmarked under
a specific file/folder/page/bookmark does not show overview what it's context is

My main *need is, that when any bookmark is shared with me (e.g. a link to a github issue or even a website, i want to know what are the parents.

If somebody shares with me a link, i can literally see the file/folder it is under, imagine you see a link like:

./dashboard.html ....
or
./user/work/my-projects/tesla//design/roadster/dashboard.html
The latter gives you a lot of context precisely because you know the file path which shows you the parents.

I also can easily switch my bookmark from ./dashboard.html to
./tesla if i want the project to be bookmarked instead(but only if clicking on the popover for dashboard.html shows me also the parent(s) :-)

So please, the requirement is to:

enable the overview over one or more parents (because maybe dashboard.html is also bookmarked/symlinked under ./user/work/presentations/2022.11.15/meeting-with-musk/dashboard.html
make the design work in any terminal too (which only understands ascii/emoji/utf-8 characters) ...which doesn't leave much choice, even though in a web app we can use a more sophesticated theme to make it smoother than it would appear in a computer terminal :-)

In fact - the entire tiling window manager is in part targeting developers who mainly use a terminal - and should ideally work in a computer terminal (in a shell, like "bash") too

As you said - those "files" belong to different "destinations" (in the whole root directory)

You talk about an example with html files all bookmarked under a special ./HTML Files/ folder somewhere

So look at the path /root/user/org2/org2b/repo1/ for example.
You can see it has orgA, orgB, orgC and orgD as a parent.

So imagine repo1 was instead /root/user/org2/org2b/repo1.html
So you could see that this html file is bookmarked or linked under those 4 orgs.
But it could easily also show one more parent, which would be ./html

so if you go to your new ./HTML Files/ folder you see all html files quickly.
but if you go to any html file you can easily see that it is part of the ./HTML Files/ folder too

It is exactly the use case I want to solve and make things more easily visible.

What do we care about?

you say you only care about the html files which is fine.
but i do care about the overall structure too

What we care about depends on our use case - basically our "query" to the "database".
It depends on what we wanna know... So in the scenario where you say you only care about the html files and nothiner else. => The answer is to just not expand the parents :-)

for example

Imagine the bookmark bar shows HTML Files and other bookmarks (5 in total), e.g.
🧲🏰─🗝user
🧲📂─🗂️HTML Files
🧲📂─🗂️tesla
🧲📂─🗂️presentations
🧲📂─🗂️documents

Imagine the file explorer would look like this:

🧲🏰┬🗝user
    ├📂┬🗂️work
    │  └📂┬🗂️my-projects
    │     ├📂┬🗂️files
    │     │  └📂┬🗂️HTML Files
    │     │     ├📄─🗂️dashboard.html
    │     │     └📄─🗂️dashboard.html
    │     ├📂┬🗂️tesla
    │     │  └📂┬🗂️design
    │     │     ├📄─🗂️dashboard.html
    │     │     ├📂┬🗂️modelX
    │     │     │  └📄─🗂️dashboard.html
    │     │     ├📂┬🗂️modelY
    │     │     │  └📄─🗂️dashboard.html
    │     │     └📂┬🗂️roadster
    │     │        └📄─🗂️dashboard.html
    │     └📂┬🗂️presentations
    │        └📂┬🗂️2022.11.15
    │           └📂┬🗂️meeting-with-musk
    │              └📄─🗂️dashboard.html
    └📂┬🗂️documents
       └📁┬🗂️HTML Files
          ├📄─🗂️dashboard.html
          └📄─🗂️dashboard.html
🧲📂─🗂️HTML Files
🧲📂─🗂️tesla
🧲📂─🗂️presentations
🧲📂─🗂️documents

First - Should the above be allowed?
Or when you link 2 HTML files from different location, but both e.g. called index.html into the same bookmark folder, would you be forced to give the linked version a different name, e.g. indexA.html->index.html so that it doesn't have multiple times the same name in one folder?

Second

If you are in /user/documents/HTML Files you see all HTML files you have
If you are in /user/work/my-projects/tesla/files/HTML Files you see all tesla html files
If you are in /user/work/presentations/2022.11.15/meeting-with-musk you see all relevant html files

But would you know which file is which in terms of overview?

is it always the same dashboard.html file?
is it always a different dashboard.html file?
If you delete the first /user/documents/HTML Files/dashboard.html file, is it gone forever or was it just a link and still exists in another folder?
If you delete or change the ./modelY/dashboard.html, will that affect meeting-with-musk?

Your use cases is solved by seeing the popover look like this.
This shows exactly what you want, only the HTML Files you care about, nothing else, just like you want it. Your bookmark bar has 5 entries and you open the popover for HTML Files and you only see the HTML Files inside it. Isn't that great?!? :-)

🧲🏰─🗝user
🧲📂┬🗂️HTML Files
    ├📄─🗂️dashboard.html
    ├📄─🗂️dashboard.html
    └📄─🗂️dashboard.html
🧲📂─🗂️tesla
🧲📂─🗂️presentations
🧲📂─🗂️documents

my use case is solved by enabeling me to expand HTML files or a specific html file

🧲🏰─🗝user
🧲📂┬🗂️HTML Files
    │  ┌📎HTML Files
    │  │  ┌📁─🗂️documents
    │  ├📁┴🗂️HTML Files
    │  ├📁─🗂️roadster
    │  ├📁─🗂️meeting-with-musk
    ├📄┴📂dashboard.html
    │  ┌📎HTML Files
    │  │  ┌📁─🗂️documents
    │  ├📁┴🗂️HTML Files
    │  ├📁─🗂️modelY
    │  ├📁─🗂️modelX
    │  ├📁─🗂️design
    └📄─🗂️dashboard.html
🧲📂─🗂️tesla
🧲📂─🗂️presentations
🧲📂─🗂️documents

so actually, now i know from that already what my bookmark 🧲📂┬🗂️HTML Files is,
and if i expand it i know now.

🏰─🗝user
             ┌🏰┬🗝user
             │  └📁┬🗂️documents
👉           │     └📄─🗂️HTML Files     <-- click here to channge pinned bookmark to this!
          ┌📁┴🗂️work
       ┌📁┴🗂️my-projects
    ┌📁┴🗂️files
🧲📂┼🗂️HTML Files
    │  ┌📎HTML Files
    │  │  ┌📁─🗂️documents
    │  ├📁┴🗂️HTML Files
    │  ├📁─🗂️roadster
    │  ├📁─🗂️meeting-with-musk
    ├📄┴📂dashboard.html
    │  ┌📎HTML Files
    │  │  ┌📁─🗂️documents
    │  ├📁┴🗂️HTML Files
    │  ├📁─🗂️modelY
    │  ├📁─🗂️modelX
    │  ├📁─🗂️design
    └📄┴🗂️dashboard.html
🧲📂─🗂️tesla
🧲📂─🗂️presentations
🧲📂─🗂️documents

🧲🏰─🗝user
       ┌🏰─🗝user
    ┌📁┴🗂️documents
🧲📂┼🗂️HTML Files
    │  ┌📎HTML Files
    │  │  ┌📁─🗂️documents
    │  ├📁┴🗂️HTML Files
    │  ├📁─🗂️roadster
    │  ├📁─🗂️meeting-with-musk
    ├📄┴📂dashboard.html
    │  ┌📎HTML Files
    │  │  ┌📁─🗂️documents
    │  ├📁┴🗂️HTML Files
    │  ├📁─🗂️modelY
    │  ├📁─🗂️modelX
    │  ├📁─🗂️design
    └📄┴🗂️dashboard.html
🧲📂─🗂️tesla
🧲📂─🗂️presentations
🧲📂─🗂️documents

You see how now you changed your bookmarks from ./my-projects/files/HTML Files/ to /user/documents/HTML Files/ :-)

This was referenced Sep 7, 2022

Design - bookmarksContainer #115

Open

tiling window manager (UI/UX) -- 3 #111

Open

Mehrabbruno changed the title ~~Design - bookmarksPopover_v0.0.1 pop-over for bookmarksContainer_v0.0.1~~ Design - bookmarksPopover Sep 18, 2022

Mehrabbruno mentioned this issue Sep 19, 2022

Design TWM - popOvers Deprecated #113

Open

42 tasks

Mehrabbruno mentioned this issue Oct 30, 2022

Design - popoverContainer #125

Open

10 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Design - bookmarksPopover #122

Design - bookmarksPopover #122

Mehrabbruno commented Sep 7, 2022 •

edited

Loading

Mehrabbruno commented Oct 5, 2022 •

edited

Loading

serapath commented Oct 22, 2022

Mehrabbruno commented Oct 30, 2022 •

edited

Loading

serapath commented Oct 31, 2022

Mehrabbruno commented Nov 2, 2022 •

edited

Loading

serapath commented Nov 5, 2022 •

edited

Loading

Design - bookmarksPopover #122

Design - bookmarksPopover #122

Comments

Mehrabbruno commented Sep 7, 2022 • edited Loading

@todo

@info

Mehrabbruno commented Oct 5, 2022 • edited Loading

Worklog

Tasks

serapath commented Oct 22, 2022

Mehrabbruno commented Oct 30, 2022 • edited Loading

Worklog

Tasks

serapath commented Oct 31, 2022

A

B

solution

Mehrabbruno commented Nov 2, 2022 • edited Loading

Worklog

Task

Proposed Tasks

Feedback

serapath commented Nov 5, 2022 • edited Loading

for example

Mehrabbruno commented Sep 7, 2022 •

edited

Loading

`@todo`

`@info`

Mehrabbruno commented Oct 5, 2022 •

edited

Loading

Mehrabbruno commented Oct 30, 2022 •

edited

Loading

Mehrabbruno commented Nov 2, 2022 •

edited

Loading

serapath commented Nov 5, 2022 •

edited

Loading