bibledit / cloud

Source code for Bibledit core library and Cloud binary
GNU General Public License v3.0
13 stars 3 forks source link

Improving visual appearance of the five tabs in basic mode #502

Closed teusbenschop closed 3 years ago

teusbenschop commented 3 years ago

Here is a mockup/prototype of the 5 tabs CSS element:

https://aranggitoar.github.io/navbarmockup.github.io/

It was created by @aranggitoar

aranggitoar commented 3 years ago

Hello @teusbenschop and @warpok!

All the updates have now been integrated into the Indonesian version of Bibledit Cloud.

The result can be seen at http://bibledit.org:8082 and all free Cloud editions as well.

That's great news!

And that makes it easier to handle future updates.

I agree, if something happens you would know if it was my code and you could easily contact me to fix them.

If you would like to enter your name and copyright information where relevant, please make pull requests where needed.

Alright, I will do that later, thank you.

Okay, from @warpok's 7 points I've only been able to solve the 1st, 2nd, 3rd and 7th point, I will be working on the unification and then go back here to see what I can help with the rest. Here is the new files (header.js and stylesheet.css) already in their respective folders: bibledit-visual-improvement-bugfix-20th-march-2021.zip

The old vertical slider might be OK for most books and chapters. The exception would be something like Psalms and chapter 119.

I will see what I can do with that, for now I've only made it to be displayed the same way as the book selector.

Also, I saw that you added the active CSS class on the bible book selector through C++ @teusbenschop in /changes/changes.cpp. I don't know how to do that yet to the workspace selector as @warpok 2nd point, so I added some workarounds with Javascript in the header.js file. Basically it looks into the full path of the page, take the two last characters, pick the numbers inside the chosen characters, then loop over the span child elements of the workspace picker (the one with the fadeout class) and add the active CSS class to the one with the index equal to the numbers picked before.

If you want to add the feature in C++ feel free to do that and remove the last block of code in the header.js file. Or you can point me to where I might do that and I will try to write it, I think it's configured in /changes/changes.cpp too?

Thank you!

Edit: Now the 1st, 2nd, 3rd, 5th, and 7th point are fixed. I've included them in a pull request, #517.

warpok commented 3 years ago

What WONDERFUL progress! Way to go Aranggi and Teus.

One thing doesn't work: I have our Notes set to show the color according to the Status. But the Notes are all showing one color again. Bottom setting: Screenshot at 2021-03-20 14-05-44 I suspect this will be remedied when the stylesheet is updated correction that you were talking about.

Also, the first setting on the screenshot above is the 4 second setting for collapsing the extra menu choices. At first I thought that this was not working. It is working, but takes between 7-9 seconds on my old laptop.

As for hot keys, I just want to say how happy I am that the Ctrl-G still works to quickly move to different places in Bibledit. That is the ONLY choice if working on Psalms: Screenshot at 2021-03-20 14-02-33 The same is true when there are more than 31 verses.

There was an enthusiastic message in our team WA group from Budi sending emoticon thanks to you Teus! Thanks to you too, Aranggi.

teusbenschop commented 3 years ago

Glad to see how nice and how well it now looks, it's going well the way it's going now.

If the chapter selector could fold over multiple lines, then it would be easier to see all the chapters available. And the same for the verses. Then all the chapters can be selected, and all the verses, if there's many chapters or many verses.

warpok commented 3 years ago

The team's reaction was only about one menu line not disappearing. One was a Chromebook user. From what I saw, sometimes the extra menu does not collapse even after 10 seconds. But for me, it has been collapsing, just taking extra time.

I like the idea of the chapter and verse selectors folding over several lines if necessary. Most of the time, on my desktop, it won't need to fold.

Another thing I notice is that the colors for the OT and NT are not different, as they were in the mock up.

I received two emails from members delighted by the changes in the interface.

warpok commented 3 years ago

Teus, I have translated the headings for the Indonesian tabs. Please update the translation, and I will see if I found the right parts to translate.

warpok commented 3 years ago

At this point in the Guest site (or admin for that) The pretty tabs switch to the old colors before going back to the proper colors. The first tab in the old colors is canary yellow, so it makes quite a contrast.

Aranggi said that 1 and 2 had been done. But the Old Testament and New Testament books in the book picker are still one color.

2. The active tab is not showing a different color when activated, like an outline or a switch of color for the tab title.

warpok commented 3 years ago

Yay! The colors for the Notes are BACK! Thanks so much!

aranggitoar commented 3 years ago

At this point in the Guest site (or admin for that) The pretty tabs switch to the old colors before going back to the proper colors. The first tab in the old colors is canary yellow, so it makes quite a contrast.

Aranggi said that 1 and 2 had been done. But the Old Testament and New Testament books in the book picker are still one color.

2. The active tab is not showing a different color when activated, like an outline or a switch of color for the tab title.

Yes @warpok I saw that just now, that was unexpected. I will see what's wrong right away!

warpok commented 3 years ago

Not is Basic mode, but an issue with tabs: On my Tablet, the tabs refuse to collapse, no matter how long I wait. On my computer, I notice that the Tabs stay non-collapsed as long as the cursor is anywhere up in the menu area. Screenshot_20210321-071402_Chrome

warpok commented 3 years ago

Note that in the cloud using the Chrome browser on Android, not only does the workspace menu stay on the screen, but it did not update with bolding the 3B workspace. The active workspace in this screenshot is not the 3bagian one, but the 3B one.

Screenshot_20210324-070528_Chrome

warpok commented 3 years ago

When saving a Note in the Notes pane, before the right menu comes back to that pane, a ghost menu appears that it W T C … = Workspace Translate Cari … This is the program trying to write the main menu first in the Notes pane, but then the real menu appears: Notes [Select] [update] …

warpok commented 3 years ago

Aranggi, saya mengusul mengubah favicon untuk Bibledit. Saya senang logo Bibledit yang baru kalau terlihat besar. Kalau kecil seperti favicon, kelihatannya seperti ibu gemuk dengan dua buah dada besar. ;-) Hapuskan dua garis di bawah buku, dan membesar sehingga bentuk Alkitab bisa terlihat. Mungkin tidak perlu kedua sisi buku kelihatan. Bisa halaman di kiri atau di kanan.

aranggitoar commented 3 years ago

Hello @warpok! Thank you for the updates, I have took my notes. I will work on the bugs first while thinking about the favicon/logo idea.

Saya senang logo Bibledit yang baru kalau terlihat besar. Kalau kecil seperti favicon, kelihatannya seperti ibu gemuk dengan dua buah dada besar. ;-)

Hahaha, kita tidak mau orang berpikir seperti itu ya, jadi lebih baik diubah.

aranggitoar commented 3 years ago

Hello @teusbenschop and @warpok! I've fixed a few bugs and added a pull request at #528.

It was four things:

  1. The switching tabs color while loading
  2. The Bible book picker background color not showing
  3. The active workspace not being distinguished from the inactive ones
  4. Workspace tabs that doesn't fadeout and not shown full in small devices

The third fix @teusbenschop might want to look at. I was figuring out how I can replicate the active class addition to books/chapter/verse picker to the workspace tabs. And what I came up is to add a small code that inserts the class into the workspace HTML generator as you can see in the pull request. I don't think it will mess with other parts of the generator as it is just adding into the premade HTML, but maybe there is a better place to put it. You decide brother, @teusbenschop.

The fourth one is just rolling back into the original function, I haven't figured out how to make the delay stop while the user is choosing the workspace.

Edit: I missed a whitespace on one of the bugfixes, sorry! Added a new pull request at #529.

warpok commented 3 years ago

It's much better, Aranggi!

4 seems fixed. The extra tabs very nicely scroll away on my tablet. Beautiful.

  1. There are colors for the OT and NT. (Rather garish colors, unfortunately.) I suggest that you make the colors for the different kitab like the darkest blue tab and the darkest red tab, so they will match better.

3 is still not finished. But that is very minor.

  1. is fixed.

Issue 5: The main menu tries to draw itself in the Workspace Notes pane/window in Advanced Mode. I sent Aranggi a video of this. (The Guest Users won't see that, because they only have basic mode. It doesn't do that in Basic Mode.)

Teus, please give the new version of the tabs to us in the TSI port.

warpok commented 3 years ago

Teus, one of the basic mode tabs was still not translated. (The translate button.) It has been translated now, and I also translated Basic mode. Please re-import the new Indonesian translation.

aranggitoar commented 3 years ago

Hello @warpok, how about these colors?

book-picker-darker-colors_2021-03-28

And I can't seem to access the advanced mode in port 8083, can you elevate my role? The username that I registered with was "a_toar". Only then I can help with the third and fifth issue. Thank you!

teusbenschop commented 3 years ago

Teus, please give the new version of the tabs to us in the TSI port.

It was put out on port 2016/2017 now. Enjoying the improved pleasant look!

teusbenschop commented 3 years ago

Teus, one of the basic mode tabs was still not translated. (The translate button.) It has been translated now, and I also translated Basic mode. Please re-import the new Indonesian translation.

The updated Indonesian translation was imported, I could see the three new translations. It's being installed to the 8082 port now.

aranggitoar commented 3 years ago

Hello @warpok and @teusbenschop!

So the third issue is solved, I saw no problem in the 8083 port. I've recorded myself navigating the workspaces here.

About the fifth issue, it's not only on the notes workspace iframe but in every workspace iframes. I think it's because the same HTML code that is used to generate the main screen/display is used to generate the workspace iframes. The second part (from around 40th second) is for @teusbenschop to see about this issue.

I see that what @teusbenschop did was to create a condition to display or not to display the topbar. But that condition is only applied after the whole HTML is generated. Hence the momentarily blink of the topbar.

So if we were to make the topbar to not even be generated, what we would need to do is to separate the HTML generator for the main screen/display with the one for the workspace iframes, is that right @teusbenschop?

aranggitoar commented 3 years ago

The bible book picker's colors is darkened, I think it's less garish now!

I've sent the change at #535.

teusbenschop commented 3 years ago

About the fifth issue, it's not only on the notes workspace iframe but in every workspace iframes. I think it's because the same HTML code that is used to generate the main screen/display is used to generate the workspace iframes. The second part (from around 40th second) is for @teusbenschop to see about this issue.

I see that what @teusbenschop did was to create a condition to display or not to display the topbar. But that condition is only applied after the whole HTML is generated. Hence the momentarily blink of the topbar.

So if we were to make the topbar to not even be generated, what we would need to do is to separate the HTML generator for the main screen/display with the one for the workspace iframes, is that right @teusbenschop?

What you point out as the cause of the short blink of the topper looks to be the correct diagnosis.

Yes, I made it to hide the topbar when the page was inside an iframe, and if not in an iframe, the topbar remains as it is, that is, it remains visible.

The issue I ran into initially, while writing this, was that C++ does not know whether the page that is should generate is called from an individual page, or from the same page running from the iframe. And even today I won't know of a simple way to let C++ know about that.

The issue does not display in the original stylesheet, so is the updated stylesheet.css different that is now shows the blinking?

aranggitoar commented 3 years ago

Hello @teusbenschop.

The issue I ran into initially, while writing this, was that C++ does not know whether the page that is should generate is called from an individual page, or from the same page running from the iframe. And even today I won't know of a simple way to let C++ know about that.

Reading the code again it seems that the condition inside the displayTopbar() function is never passed. I think that query that you built is not being read because request->query.count ("topbar") would only read the actual URL and not the URL that is being generated with filter_url_build_http_query function that you made. This is a short video of how I come into that conclusion.

If there is no solution yet then we can post it as an issue for the future.

Edit: The screenrecorder doesn't detect the browser window that I pulled up, this is what I was pointing at in the middle of the video: Kazam_screenshot_00000

teusbenschop commented 3 years ago

I have tried too to get the blinking visible, but the internet connection is fast enough here so the blinking, although it's there, it won't be visible to the naked eye. In the video that you recorded, the blinking is clearly visible from your end.

Question: Do you also see the blinking at http://bibledit.org:8090 ? That website uses the current styling and CSS. Does it show the blinking too from your end?

Reading the code again it seems that the condition inside the displayTopbar() function is never passed. I think that query that you built is not being read because request->query.count ("topbar") would only read the actual URL and not the URL that is being generated with filter_url_build_http_query function that you made.

The topbar is really being read, here's a screenshot of that.

<iframe sandbox="allow-forms allow-pointer-lock allow-same-origin allow-scripts allow-modals" src="/editone2/index?topbar=0" style="flex-grow: 1" data-editor-no="1"></iframe>

Screenshot 2021-03-31 at 07 00 43

The issue is that the ?topbar=0 is generated upon loading the <iframe>. But when starting to switch pages inside that