Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ux/#2496): Configurable statusbar #3402

Open
wants to merge 25 commits into
base: master
Choose a base branch
from
Open

feat(ux/#2496): Configurable statusbar #3402

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
cd08482
feat(ux): Configurable mode indicator (#2496)
andr3h3nriqu3s11 Apr 9, 2021
21a2c5d
Started work
andr3h3nriqu3s11 Apr 10, 2021
775b3e8
Update settings.md, ConfigurationDefaults.re, and 3 more files...
andr3h3nriqu3s11 Apr 11, 2021
91793e1
Formated
andr3h3nriqu3s11 Apr 11, 2021
42dd87d
Added possible extencion control(need testing), changed configuration…
andr3h3nriqu3s11 Apr 11, 2021
cb9822c
Notification now works on It self without moving items around
andr3h3nriqu3s11 Apr 12, 2021
745c3f8
Refactoring
andr3h3nriqu3s11 Apr 12, 2021
b3e5bac
Changed extencion items detection from id to id || command
andr3h3nriqu3s11 Apr 12, 2021
203c4ec
Started working on the 1st to items of the list
andr3h3nriqu3s11 Apr 12, 2021
600c48a
Added "compact" mode for notifications
andr3h3nriqu3s11 Apr 13, 2021
402e3cf
Fixes and update to the docs
andr3h3nriqu3s11 Apr 14, 2021
6792f0b
Format and removed logs
andr3h3nriqu3s11 Apr 14, 2021
c552736
Merge branch 'master' into feat/ux/configurable-statusbar
andr3h3nriqu3s11 Apr 14, 2021
34bd310
Fixed "left/rigth" to "start/end"
andr3h3nriqu3s11 Apr 14, 2021
9744bff
Fixed if configuration was alone the text din't appear
andr3h3nriqu3s11 Apr 14, 2021
c3475c1
Merge branch 'master' into feat/ux/configurable-statusbar
andr3h3nriqu3s11 Apr 15, 2021
2bde61c
Merge branch 'master' into feat/ux/configurable-statusbar
andr3h3nriqu3s11 Apr 17, 2021
de6585b
Merge with master
andr3h3nriqu3s11 Apr 22, 2021
5b75ef2
Merge branch 'master' into feat/ux/configurable-statusbar
andr3h3nriqu3s11 Jun 20, 2021
b43dcce
Merge branch 'master' into feat/ux/configurable-statusbar
andr3h3nriqu3s11 Jun 30, 2021
df930d9
Merge branch 'master' into feat/ux/configurable-statusbar
andr3h3nriqu3s11 Jul 2, 2021
aa2b3ee
Formated
andr3h3nriqu3s11 Jul 12, 2021
efcd50b
Merge branch 'master' into feat/ux/configurable-statusbar
andr3h3nriqu3s11 Jul 12, 2021
c69fb1e
Merge branch 'master' into feat/ux/configurable-statusbar
andr3h3nriqu3s11 Jul 24, 2021
f10f07b
Merge branch 'master' into feat/ux/configurable-statusbar
andr3h3nriqu3s11 Aug 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 19 additions & 2 deletions docs/docs/configuration/settings.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,8 +144,6 @@ The configuration file, `configuration.json` is in the Oni2 directory, whose loc

- `workbench.sideBar.visible` __(_bool_ default: `true`)__ - Controls the visibility of the sidebar.

- `workbench.statusBar.visible` __(_bool_ default: `true`)__ - Controls the visibility of the status bar.

- `window.menuBarVisibility` __(_"visible" | "hidden"_ default: `"visible"`)__ - Controls the visibility of the menu bar.

- `oni.layout.showLayoutTabs` __(_"always"|"smart"|"never"_ default: `"smart"`)__ - Controls the display of layout tabs. `"smart"` will only show the tabs if there's more than one.
Expand All @@ -154,6 +152,25 @@ The configuration file, `configuration.json` is in the Oni2 directory, whose loc

- `oni.layout.singleTabMode` __(_bool_ default: `false`)__ - When `true`, groups will only hold a single editor, and closing this editor will always close the group. It will also hide the editor tabs, and therefore essentially hide the concept of editor groups.

- `workbench.statusBar.visible` __(_bool_ default: `true`)__ - Controls the visibility of the status bar.

- `workbench.statusBar.items.start` __(_[items]_ default: `["notificationCount"]`)__ - Defines the first group of items that appear.

- `workbench.statusBar.items.showOnNotification` __(_[items]_ default: `["notificationCount", "modeIndicator"]`)__ - Defines the group of items that are hiden by the notification popup text.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would be great to document the 'notificationMode' and 'hidden' properties here, too!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done! 👍

Although I would ask for anyone to check the docs that I made, because I am not good with words...

- `workbench.statusBar.items.end` __(_[items]_ default: `["modeIndicator"]`)__ - Defines the group of items that appears at the end of the status bar, these items are hidden by a notification message.
- _"notificationCount"_ - Notification Count icon and counter
- _"macro"_ - The vim macro indicator
- _"leftItems/rightItems"_ - Items that generated based on other factors, like extensions
- _"diagnosticCount"_ - Problem icon and counter
- _"git"_ - Source control information
- _"lineEndings"_ - Line endings information
- _"indentation"_ - Indentation information
- _"fileType"_ - File type information
- _"position"_ - Position information
- _"modeIndicator"_ - Vim mode indicator
- _"..."_ - The rest of the items in that group, as by the default, that are not defined in other groups

### Rendering

- `vsync` __(_bool_ default: `false`)__ - Whether rendering should sync with vertical retrace of the monitor. VSync adds input latency, as rendering must sync with the refresh rate of the monitor, but it reduces screen tearing.
Expand Down
6 changes: 6 additions & 0 deletions src/Core/ConfigurationDefaults.re
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,12 @@ let getDefaultConfigString = configName =>
"workbench.sideBar.location": "left",
"workbench.sideBar.visible": true,
"workbench.statusBar.visible": true,
"workbench.statusBar.items": {
"left": ["notificationCount", "macro", "leftItems", "diagnosticCount", "git"],
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like we'll need to replace leftItems with ... and rightItems with ... below

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(Oops, this was just echoing what @z0al mentioned in his reply - beat me to it!)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of left/right, we'll need to change these to start/end to be in sync with documentation

Copy link

@z0al z0al Apr 14, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed in the demo from @bryphe below that we need to adjust the default configuration shipped in Oni to eliminate the spacing gap between notification items by default. It's caused by items hidden due to showOnNotificaiton still occupying their position.

To remove the spacing we can adjust the default configuration to something like this.

{
  "workbench.statusBar.items": {
    "left": ["notificationCount", "diagnosticCount", "notification", "..."],
    "right": ["...", "modeIndicator"],
    "showOnNotification": ["notificationCount", "modeIndiactor", "diagnosticCount"]
  }
}

Copy link
Contributor Author

@andr3h3nriqu3s11 andr3h3nriqu3s11 Apr 14, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually that's not necessary, but it might be a good idea, to make diagnosticCount be next to the notificationCount and always the shown.

By default, diagnosticCount is not on showOnNotification so it will be hidden.

Also, I changed the code now so that the default behavior is for the showOnNotification to be forced grouped together on their side, ex:

  "start": ["aa", "bb", "cc"]
  "showOnNotification": ["aa", "cc"]

Then it's shown as

["aa", "cc", "bb"]

And then I added a new noficationMode keepPosition where it forces the items to be in the position that user specified, but it will cause those gaps

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure I follow. I thought diagnosticCount is part of the default notification pop. If it's not then nevermind

But the point I was trying to make is to explicitly define the notificationMessage position next to the items that will be shown in items.start. That means something like below. That ensures by default there is no gap. If the user changed the ordering then they need to make it a way that doesn't introduce gap as well:

{
  "workbench.statusBar.items": {
    "left": ["notificationCount", "notificationMessage", "..."],
    "right": ["...", "modeIndicator"],
    "showOnNotification": ["notificationCount", "modeIndiactor"]
  }
}

Also, I changed the code now so that the default behavior is for the showOnNotification to be forced grouped together on their side

That can also be a fix for the issue. But the reason I didn't suggest that because it rearranges some of the elements on the status bar only to revert back to the original positioning a second later, I think that can result in a bad UX. But I didn't see it in practice, maybe it's not that bad.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That can also be a fix for the issue. But the reason I didn't suggest that because it rearranges some of the elements on the status bar only to revert back to the original positioning a second later, I think that can result in a bad UX. But I didn't see it in practice, maybe it's not that bad.

Sorry I have seamed to not explain my self correctly...

It will be shown as this all the time not only for the notification

["aa", "cc", "bb"]

Copy link

@z0al z0al Apr 14, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, I see, I misunderstood. If I get it correctly now, it means we will automatically group notification items even though the user might have chosen a different positioning. To force the items to be kept in the same position as the configs the keepPosition mode must be set, right?

I feel like that defeats the purpose of explicitly positioning the items via configs... in general, I'd try to make things Simple and Stupid. In this case, It seems like we are adding complexity for a little gain especially since the fix for gapping can be done by the user him/herself with little effort. We just need to make our defaults gapless.

But I also feel like I'm being too picky here, sorry. so I'd leave it for @bryphe to decide what makes sense. Thanks for the great work on this 🙇🏻‍♂️

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

| Oh, I see, I misunderstood. If I get it correctly now, it means we will automatically group notification items even though the user might have chosen a different positioning. To force the items to be kept in the same position as the configs the keepPosition mode must be set, right?

Yes

I feel like that defeats the purpose of explicitly positioning the teams via configs... in general, I'd try to make things Simple and Stupid. In this case, It seems like we are adding complexity for a little gain especially since the fix for gapping can be done by the user him/herself with little effort. We just need to make our defaults gapless.

True, true then maybe what we have to do it's have default to match what the user put and then maybe have a prettify option tries to move everything together? What do you think?

"showOnNotification": ["modeIndicator", "notificationCount"],
"rigth": ["rightItems", "lineEndings", "indentation", "fileType", "position", "modeIndicator"],
"hidden": [],
},
"workbench.tree.indent": 2,
"vim.useSystemClipboard": ["yank"]
}
Expand Down
39 changes: 29 additions & 10 deletions src/Feature/Notification/Feature_Notification.re
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -415,6 +415,15 @@ module View = {
transform(Transform.[TranslateY(yOffset)]),
];

let containerCompact = (~background, ~yOffset) => [
position(`Relative),
backgroundColor(background),
flexDirection(`Row),
alignItems(`Center),
paddingHorizontal(10),
transform(Transform.[TranslateY(yOffset)]),
];

let text = (~foreground) => [
textWrap(TextWrapping.NoWrap),
marginLeft(6),
Expand All @@ -436,6 +445,8 @@ module View = {
~background,
~foreground,
~font: UiFont.t,
~onlyAnimation: bool,
~compact: bool,
(),
) => {
let yOffset = model.yOffset;
Expand All @@ -456,16 +467,24 @@ module View = {
| None => React.empty
};

<View ?key style={Styles.container(~background, ~yOffset)}>
<icon />
<source />
<Text
style={Styles.text(~foreground)}
fontFamily={font.family}
fontSize=11.
text={model.message}
/>
</View>;
onlyAnimation
? <View ?key style={Styles.container(~background, ~yOffset)} />
: <View
?key
style={
compact
? Styles.containerCompact(~background, ~yOffset)
: Styles.container(~background, ~yOffset)
}>
<icon />
<source />
<Text
style={Styles.text(~foreground)}
fontFamily={font.family}
fontSize=11.
text={model.message}
/>
</View>;
};
};

Expand Down
2 changes: 2 additions & 0 deletions src/Feature/Notification/Feature_Notification.rei
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,8 @@ module View: {
~background: Color.t,
~foreground: Color.t,
~font: UiFont.t,
~onlyAnimation: bool,
~compact: bool,
unit
) =>
React.element(React.node);
Expand Down
Loading