Settings: Split extra options modal to tabs

[Taitava]

The extra options modal (that contains alias, confirmation and output settings) will grow in the amount of settings. Particularly, #76 will bring new command fields (for OS specific shell commands) and an ability to choose a shell that will run those OS pecific commands. For this reason, I'll divide it's content to tabs.

Tabs

• [x] General

  • Alias
  • Ask confirmation before execution

• [x] Output

  • Output channel for stdout
  • Output channel for etderr
  • Order of stdout/sdterr output
  • Ignore error codes

• [x] Operating systems & shells

  • All new settings from #76

• [x] In addition for being able to switch tabs in the modal itself, there will be an icon button for each tab in shell command setting rows so that a user can directly open the modal to a specific tab, e.g. Output instead of General.

[Taitava]

This is otherwise done, but I still need to add this:

In addition for being able to switch tabs in the modal itself, there will be an icon button for each tab in shell command setting rows so that a user can directly open the modal to a specific tab, e.g. Output instead of General.

Edit: added.

[Taitava]

This is how the new tab system is going to look like, at least in the beginning. Output tab is currently open and highlighted.

I'm happy with the tab contents, but not so happy with the tab buttons, they miss some polishing. @FelipeRearden, you've seen so many plugins, have you ever seen another plugin that uses this kind of tabbing system somewhere in its user interface? What does it look like? If another plugin has already created tabs, I might want to "borrow" their style if it looks better than this.

This being said, the tabs work well (at least during quick tests), and that's the most important thing. Layout can be improved later.

Main settings view has also received the two new icons that were present in the first image. Click any of the three icons (gear + two new icons), and you'll have a specific tab open in the modal.

Please don't say anything about the icons 🙂 🙂 . They are not so well picked. I'll import a wider icon library at some point and change most of SC's icons at one go. We can have icon discussion when I have a collection of icons to show to you.

[FelipeRearden]

This is how the new tab system is going to look like, at least in the beginning. Output tab is currently open and highlighted.

AMAZING !!!! Thanks you very much for this sneak peek of the new window 😄 😄 😄

I'm happy with the tab contents, but not so happy with the tab buttons, they miss some polishing. @FelipeRearden, you've seen so many plugins, have you ever seen another plugin that uses this kind of tabbing system somewhere in its user interface? What does it look like? If another plugin has already created tabs, I might want to "borrow" their style if it looks better than this.

Unfortunately, no :( as far as I know SC will be the first plugin with a tab structure in Settings !!!!

But I will keep looking and let you know if I find one 😃

This being said, the tabs work well (at least during quick tests), and that's the most important thing. Layout can be improved later.

Sure! I like this kind of layout from MacOS: look at the two tabs in the top of the screen

Main settings view has also received the two new icons that were present in the first image. Click any of the three icons (gear + two new icons), and you'll have a specific tab open in the modal.

AMAZING :)

Please don't say anything about the icons 🙂 🙂 . They are not so well picked. I'll import a wider icon library at some point and change most of SC's icons at one go. We can have icon discussion when I have a collection of icons to show to you.

🤐 :)

[Taitava]

Unfortunately, no :( as far as I know SC will be the first plugin with a tab structure in Settings !!!!

But I will keep looking and let you know if I find one 😃

Thank you! 🙂

Sure! I like this kind of layout from MacOS: look at the two tabs in the top of the screen

That looks good. I like the idea of making the tab buttons go halfway down on the tab content area. I'll think about it. For colors, I think I could take a look if there is a way to use some kind of theme defined highlight color for active tabs, so that I won't end up using a color that does not fit into a special theme that a user might use. That being said, I do like the blue color, just not sure if I'll end up using it.

[FelipeRearden]

Sure! I like this kind of layout from MacOS: look at the two tabs in the top of the screen

:)

For colors, I think I could take a look if there is a way to use some kind of theme defined highlight color for active tabs, so that I won't end up using a color that does not fit into a special theme that a user might use. That being said, I do like the blue color, just not sure if I'll end up using it.

The var(--interactive-accent) is variable that color theme developers use in their buttons. Maybe it's good idea for a standard color. :)

Have a great day!

[Taitava]

Thanks! I need to research these CSS color variables that Obsidian has - there seems to be around 20 of them. I'll need to pick correct ones for both active and inactive tab buttons, and both text colors and background colors, so I'll need to find four variables.

Have a nice one, too! 🙂

[FelipeRearden]

Thanks! I need to research these CSS color variables that Obsidian has - there seems to be around 20 of them. I'll need to pick correct ones for both active and inactive tab buttons, and both text colors and background colors, so I'll need to find four variables.

Yeah! On the other hand, after you learn you can use for every new button :)

I just heard about the word CSS this year and I have been tweaking my vault because my monitor is an old monitor that have problems with color accuracy.

• The light grey that you see in my pictures are a dark black in my screen 😃

It's a nightmare for Obsidian on iPad :(

Have a nice one, too! 🙂

Thanks 🙂

[Taitava]

Yeah! On the other hand, after you learn you can use for every new button :)

True.

I just heard about the word CSS this year and I have been tweaking my vault

Huh, CSS is a pain to learn. I banged my head against the wall a long time ago when I needed to learn it. It's a powerful tool, but the learning curve is huge.

because my monitor is an old monitor that have problems with color accuracy.

* The light grey that you see in my pictures are a dark black in my screen 😃

Sounds crazy!

[FelipeRearden]

Huh, CSS is a pain to learn. I banged my head against the wall a long time ago when I needed to learn it. It's a powerful tool, but the learning curve is huge.

I just know the raw basic. We have so many talented people on our community that I always looks for obsidian.css of themes to understand how to achieve something. :)

because my monitor is an old monitor that have problems with color accuracy.

* The light grey that you see in my pictures are a dark black in my screen 😃

Sounds crazy!

Yeah.

The Obsidian gods listen to my pain, look @Taitava .....

https://github.com/obsidianmd/obsidian-releases/pull/603

[FelipeRearden]

Another UI idea @Taitava !

Take a look :)

[Taitava]

Wow, I think this could work for Obsidian better! 🙂

[FelipeRearden]

Wow, I think this could work for Obsidian better! 🙂

I knew you would like this one :)

[Taitava]

Btw where is the image from? 🙂

[FelipeRearden]

Obsidian Cardboard Plugin! https://github.com/roovo/obsidian-card-board 😄 😄 😄 😄 😄

[Taitava]

Obsidian Cardboard Plugin! https://github.com/roovo/obsidian-card-board 😄 😄 😄 😄 😄

Thanks I'll check it out later!

I made some small improvements, wasn't able to do the "inverted" roundings your image has (maybe I'll ask the author of Obsidian CardBoard if I can borrow their css). But this is what the tabs look like at the moment:

[FelipeRearden]

I made some small improvements, wasn't able to do the "inverted" roundings your image has (maybe I'll ask the author of Obsidian CardBoard if I can borrow their css). But this is what the tabs look like at the moment:

The new UI is amazing @Taitava !!!!!!!!! We don't need anything better than this :)

I really liked the way that is now!!!!!!

[Taitava]

I made some small improvements, wasn't able to do the "inverted" roundings your image has (maybe I'll ask the author of Obsidian CardBoard if I can borrow their css). But this is what the tabs look like at the moment:

The new UI is amazing @Taitava !!!!!!!!! We don't need anything better than this :)

I really liked the way that is now!!!!!!

Thanks, for me the only thing why I might change it to be similar with the CardBoard plugin is consistency, so that tabs on different Obsidian plugins would look the same. But maybe it can rest now and I'll see if I want to change it later.