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.

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

Add new design guidelines for title casing etc #5501

Merged
merged 5 commits into from
Mar 14, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
32 changes: 32 additions & 0 deletions DESIGN.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
# Design guidelines
Guidelines for UI design, covering GUI, CLI, documentation, log messages, etc

## Text
#### Sentences
Short, single-sentence text do NOT end in a period.

Multi-sentence text ALWAYS ends in a period.

#### Casing
We prefer normal casing, and avoid Title Casing.

We only use Title Casing for company and product names (Rerun, Rerun Viewer, Discord, …), but NOT for concepts like “container”, “space view”, etc.

#### Examples
Good: `log("File saved")`

Bad: `log("file saved.")`

### Buttons

When a button action requires more input after pressing, suffix it with `…`.

Good: `Save recording…` (leads to a save-dialog)

## GUI labels

We do not use a colon suffix for labels in front of a value.

Good: `Color 🔴`

Bad: `Color: 🔴`
2 changes: 1 addition & 1 deletion crates/re_data_ui/src/component.rs
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ impl DataUi for EntityComponentWithInstances {
.header(re_ui::ReUi::table_header_height(), |mut header| {
re_ui::ReUi::setup_table_header(&mut header);
header.col(|ui| {
ui.label("Instance Key");
ui.label("Instance key");
});
header.col(|ui| {
ui.label(self.component_name().short_name());
Expand Down
22 changes: 11 additions & 11 deletions crates/re_ui/src/command.rs
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ impl UICommand {
Self::SaveRecording => ("Save recording…", "Save all data to a Rerun data file (.rrd)"),

Self::SaveRecordingSelection => (
"Save recording (current time selection only)…",
"Save current time selection…",
"Save data for the current loop selection to a Rerun data file (.rrd)",
),

Expand Down Expand Up @@ -128,22 +128,22 @@ impl UICommand {
),

Self::ToggleMemoryPanel => (
"Toggle Memory Panel",
"Toggle memory panel",
"View and track current RAM usage inside Rerun Viewer",
),
Self::ToggleBlueprintPanel => ("Toggle Blueprint Panel", "Toggle the left panel"),
Self::ToggleSelectionPanel => ("Toggle Selection Panel", "Toggle the right panel"),
Self::ToggleTimePanel => ("Toggle Time Panel", "Toggle the bottom panel"),
Self::ToggleBlueprintPanel => ("Toggle blueprint panel", "Toggle the left panel"),
Self::ToggleSelectionPanel => ("Toggle selection panel", "Toggle the right panel"),
Self::ToggleTimePanel => ("Toggle time panel", "Toggle the bottom panel"),

#[cfg(debug_assertions)]
Self::ToggleBlueprintInspectionPanel => (
"Toggle Blueprint Inspection Panel",
"Toggle blueprint inspection panel",
"Inspect the timeline of the internal blueprint data.",
),

#[cfg(debug_assertions)]
Self::ToggleEguiDebugPanel => (
"Toggle Egui Options/Debug Panel",
"Toggle egui debug panel",
"View and change global egui style settings",
),

Expand All @@ -154,18 +154,18 @@ impl UICommand {
"Toggle between windowed and fullscreen viewer",
),
#[cfg(not(target_arch = "wasm32"))]
Self::ZoomIn => ("Zoom In", "Increases the UI zoom level"),
Self::ZoomIn => ("Zoom in", "Increases the UI zoom level"),
#[cfg(not(target_arch = "wasm32"))]
Self::ZoomOut => ("Zoom Out", "Decreases the UI zoom level"),
Self::ZoomOut => ("Zoom out", "Decreases the UI zoom level"),
#[cfg(not(target_arch = "wasm32"))]
Self::ZoomReset => (
"Reset Zoom",
"Reset zoom",
"Resets the UI zoom level to the operating system's default value",
),

Self::SelectionPrevious => ("Previous selection", "Go to previous selection"),
Self::SelectionNext => ("Next selection", "Go to next selection"),
Self::ToggleCommandPalette => ("Command Palette…", "Toggle the Command Palette"),
Self::ToggleCommandPalette => ("Command palette…", "Toggle the Command Palette"),

Self::PlaybackTogglePlayPause => {
("Toggle play/pause", "Either play or pause the time")
Expand Down
2 changes: 1 addition & 1 deletion crates/re_viewer/src/ui/rerun_menu.rs
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ impl App {
.max_height(desired_icon_height);

ui.menu_image_button(image, |ui| {
ui.set_min_width(220.0);
ui.set_min_width(240.0);

ui.menu_button("About", |ui| self.about_rerun_ui(frame, ui));

Expand Down
18 changes: 9 additions & 9 deletions crates/re_viewer/src/ui/visible_history.rs
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ static VISIBLE_HISTORY_SUPPORTED_SPACE_VIEWS: once_cell::sync::Lazy<
.into()
});

/// Entities containing one of these components support the Visible History feature.
/// Entities containing one of these components support the visible history feature.
static VISIBLE_HISTORY_SUPPORTED_COMPONENT_NAMES: once_cell::sync::Lazy<Vec<ComponentName>> =
once_cell::sync::Lazy::new(|| {
[
Expand Down Expand Up @@ -92,24 +92,24 @@ pub fn visible_history_ui(

let mut interacting_with_controls = false;

let collapsing_response = re_ui.collapsing_header(ui, "Visible Time Range", false, |ui| {
let collapsing_response = re_ui.collapsing_header(ui, "Visible time range", false, |ui| {
ui.horizontal(|ui| {
re_ui
.radio_value(ui, &mut visible_history_prop.enabled, false, "Default")
.on_hover_text(if is_space_view {
"Default Visible Time Range settings for this kind of Space View"
"Default visible time range settings for this kind of Space View"
} else {
"Visible Time Range settings inherited from parent Group(s) or enclosing \
"Visible time range settings inherited from parent Group(s) or enclosing \
Space View"
});
re_ui
.radio_value(ui, &mut visible_history_prop.enabled, true, "Override")
.on_hover_text(if is_space_view {
"Set Visible Time Range settings for the contents of this Space View"
"Set visible time range settings for the contents of this Space View"
} else if entity_path.is_some() {
"Set Visible Time Range settings for this entity"
"Set visible time range settings for this entity"
} else {
"Set Visible Time Range settings for he contents of this Group"
"Set visible time range settings for he contents of this Group"
});
});

Expand Down Expand Up @@ -263,12 +263,12 @@ pub fn visible_history_ui(
}
}

let markdown = format!("# Visible Time Range\n
let markdown = format!("# Visible time range\n
This feature controls the time range used to display data in the Space View.

The settings are inherited from parent Group(s) or enclosing Space View if not overridden.

Visible Time Range properties are stored separately for each _type_ of timelines. They may differ depending on \
Visible time range properties are stored separately for each _type_ of timelines. They may differ depending on \
whether the current timeline is temporal or a sequence. The current settings apply to all _{}_ timelines.

Notes that the data current as of the time range starting time is included.",
Expand Down
6 changes: 3 additions & 3 deletions crates/re_viewer/src/ui/welcome_screen/welcome_section.rs
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ fn onboarding_content_ui(ui: &mut Ui, command_sender: &CommandSender, accepts_co
Visualize synchronized data from multiple processes, locally or over a network.",
image: &re_ui::icons::WELCOME_SCREEN_LIVE_DATA,
add_buttons: Box::new(move |ui, command_sender| {
if large_text_button(ui, "Quick Start").clicked() {
if large_text_button(ui, "Quick start").clicked() {
let entries = if accepts_connections {
QUICK_START_ENTRIES_CONNECT
} else {
Expand Down Expand Up @@ -169,7 +169,7 @@ fn onboarding_content_ui(ui: &mut Ui, command_sender: &CommandSender, accepts_co
interactively in the viewer or (coming soon) directly from code in the SDK.",
image: &re_ui::icons::WELCOME_SCREEN_CONFIGURE,
add_buttons: Box::new(|ui, _| {
url_large_text_button(ui, "Learn about Views", SPACE_VIEWS_HELP);
url_large_text_button(ui, "Learn about views", SPACE_VIEWS_HELP);
}),
},
];
Expand Down Expand Up @@ -306,7 +306,7 @@ fn open_quick_start(
}

let store_info = StoreInfo {
application_id: "Quick Start".into(),
application_id: "Quick start".into(),
store_id: StoreId::random(StoreKind::Recording),
is_official_example: true,
started: Time::now(),
Expand Down
4 changes: 2 additions & 2 deletions crates/re_viewport/src/context_menu/mod.rs
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ fn action_list(
vec![Box::new(CloneSpaceViewAction)],
vec![
Box::new(SubMenu {
label: "Add Container".to_owned(),
label: "Add container".to_owned(),
actions: vec![
Box::new(AddContainerAction(egui_tiles::ContainerKind::Tabs)),
Box::new(AddContainerAction(egui_tiles::ContainerKind::Horizontal)),
Expand All @@ -138,7 +138,7 @@ fn action_list(
}),
],
vec![Box::new(SubMenu {
label: "Move to new Container".to_owned(),
label: "Move to new container".to_owned(),
actions: vec![
Box::new(MoveContentsToNewContainerAction(
egui_tiles::ContainerKind::Tabs,
Expand Down
4 changes: 2 additions & 2 deletions tests/python/release_checklist/check_plot_overrides.py
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@

This checks whether one can override all properties in a plot.

### Component Overrides
### Component overrides

* Select `plots/cos`.
* Override all of its properties with arbitrary values.
* Remove all these overrides.

### Visible Time Range Overrides
### Visible time range overrides
* Select the `plots` space view and confirm it shows:
* "Default" selected
* Showing data between frames -∞ and +∞ (included).
Expand Down