Skip to content

ENG-745 Update Help FAB + Menu #349

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

Merged
maparent merged 5 commits into from
Aug 27, 2025
Merged

ENG-745 Update Help FAB + Menu #349

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8d0464f
change floating menu button look
maparent Aug 20, 2025
65b70b3
color adjustments
maparent Aug 27, 2025
60ab741
settings
maparent Aug 27, 2025
5637891
do not highlight button in focus state
maparent Aug 27, 2025
47031d6
blur on close
maparent Aug 27, 2025
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
31 changes: 24 additions & 7 deletions apps/roam/src/components/DiscourseFloatingMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,14 @@ import {
PopoverInteractionKind,
} from "@blueprintjs/core";
import { FeedbackWidget } from "./BirdEatsBugs";
import { render as renderSettings } from "~/components/settings/Settings";

type DiscourseFloatingMenuProps = {
// CSS placement class
position: "top-left" | "top-right" | "bottom-left" | "bottom-right";
theme: string; // e.g., "bp3-light" | "bp3-dark"
buttonTheme?: string; // e.g., "bp3-light" | "bp3-dark"
onloadArgs?: OnloadArgs;
};

const ANCHOR_ID = "dg-floating-menu-anchor";
Expand All @@ -43,33 +45,47 @@ export const DiscourseFloatingMenu = (props: DiscourseFloatingMenuProps) => (
/>
<MenuItem
text="Docs"
icon="document-open"
icon="book"
href="https://discoursegraphs.com/docs/roam"
rel="noopener noreferrer"
target="_blank"
/>
<MenuItem
text="Community"
icon="people"
icon="social-media"
href="https://join.slack.com/t/discoursegraphs/shared_invite/zt-37xklatti-cpEjgPQC0YyKYQWPNgAkEg"
rel="noopener noreferrer"
target="_blank"
/>
<MenuItem
text="Settings"
icon="cog"
onClick={() => renderSettings({ onloadArgs: props.onloadArgs! })}
rel="noopener noreferrer"
target="_blank"
/>
</Menu>
}
onClosed={() => {
document.getElementById("dg-floating-menu-button")?.blur();
}}
position={Position.TOP}
className="bp3-popover-content-sizing"
interactionKind={PopoverInteractionKind.HOVER}
interactionKind={PopoverInteractionKind.CLICK}
shouldReturnFocusOnClose={true}
boundary="viewport"
modifiers={{
arrow: {
enabled: false,
},
offset: {
enabled: true,
offset: "-70, 15",
},
}}
>
<Button
intent={Intent.PRIMARY}
text="Discourse Graphs"
id="dg-floating-menu-button"
aria-label="Open Discourse Graphs menu"
className={props.buttonTheme}
Expand All @@ -89,11 +105,11 @@ export const showDiscourseFloatingMenu = () => {
};

export const installDiscourseFloatingMenu = (
extensionAPI: OnloadArgs["extensionAPI"],
onLoadArgs: OnloadArgs,
props: DiscourseFloatingMenuProps = {
position: "bottom-right",
theme: "bp3-light",
buttonTheme: "bp3-dark",
buttonTheme: "bp3-light",
},
) => {
let floatingMenuAnchor = document.getElementById(ANCHOR_ID);
Expand All @@ -102,14 +118,15 @@ export const installDiscourseFloatingMenu = (
floatingMenuAnchor.id = ANCHOR_ID;
document.getElementById("app")?.appendChild(floatingMenuAnchor);
}
if (extensionAPI.settings.get("hide-feedback-button") as boolean) {
if (onLoadArgs.extensionAPI.settings.get("hide-feedback-button") as boolean) {
floatingMenuAnchor.classList.add("hidden");
}
ReactDOM.render(
<DiscourseFloatingMenu
position={props.position}
theme={props.theme}
buttonTheme={props.buttonTheme}
onloadArgs={onLoadArgs}
/>,
floatingMenuAnchor,
);
Expand Down
2 changes: 1 addition & 1 deletion apps/roam/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ export default runExtension(async (onloadArgs) => {
// TODO: REMOVE AFTER TESTING
// await createOrUpdateDiscourseEmbedding(onloadArgs.extensionAPI);

installDiscourseFloatingMenu(onloadArgs.extensionAPI);
installDiscourseFloatingMenu(onloadArgs);

return {
elements: [
Expand Down
66 changes: 32 additions & 34 deletions apps/roam/src/styles/discourseFloatingMenuStyles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@
--gray-650: #2c3443;
--gray-800: #1a202c;
--base-size-step: 4px;
--distance-to-window-edge: calc(6 * var(--base-size-step));
--distance-to-window-edge: calc(8 * var(--base-size-step));
--distance-to-window-edge-horizontal: var(--distance-to-window-edge);
--distance-to-window-edge-vertical: var(--distance-to-window-edge);
--border-radius: var(--base-size-step);
--screen-box-shadow: 0px var(--base-size-step) calc(8 * var(--base-size-step))
rgba(0, 0, 0, 0.5);
--button-primary-bg-color: var(--green-500);
--button-primary-hover-color: #14ce8b;
--button-primary-bg-color: #f7f7f7;
--button-primary-hover-color: #d5dbdf;
--button-primary-text-color: white;
--button-secondary-bg-color: #00ba771a;
--button-secondary-hover-color: #00ba7738;
Expand Down Expand Up @@ -51,7 +51,7 @@
--form-input-color: black;
--form-input-placeholder-color: var(--gray-400);
--form-input-bg-color: transparent;
--form-input-focus-border-color: var(--gray-300);
--form-input-focus-border-color: #5c7080;
}

#discourse-floating-menu {
Expand Down Expand Up @@ -135,24 +135,6 @@
}
}

#discourse-floating-menu button {
font-family: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
border: none;
width: fit-content;
margin: 0;
padding: calc(2 * var(--base-size-step)) calc(3 * var(--base-size-step));
border-radius: var(--border-radius);
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}

@media (pointer: coarse) {
#discourse-floating-menu .bp3-button {
padding: calc(3 * var(--base-size-step)) calc(4 * var(--base-size-step));
Expand Down Expand Up @@ -217,11 +199,6 @@

/* Adapted from our custom css code in components/BirdEatsBugs.tsx */

#discourse-floating-menu {
--distance-to-window-edge-vertical: 50px;
--distance-to-window-edge-horizontal: 20px;
}

#discourse-floating-menu .form-error {
font-size: 1.2rem;
}
Expand All @@ -238,21 +215,42 @@
--text-color: var(--gray-200);
}

#discourse-floating-menu.bp3-light,
#discourse-floating-menu button.bp3-light {
--button-primary-bg-color: #f8f9fa;
--text-color: var(--gray-200);
}

#discourse-floating-menu button {
font-weight: 600;
font-size: 15px;
}

#discourse-floating-menu button::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml,%3Csvg width='256' height='264' viewBox='0 0 256 264' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M156.705 252.012C140.72 267.995 114.803 267.995 98.8183 252.012L11.9887 165.182C-3.99622 149.197 -3.99622 123.28 11.9886 107.296L55.4035 63.8807C63.3959 55.8881 76.3541 55.8881 84.3467 63.8807C92.3391 71.8731 92.3391 84.8313 84.3467 92.8239L69.8751 107.296C53.8901 123.28 53.8901 149.197 69.8751 165.182L113.29 208.596C121.282 216.589 134.241 216.589 142.233 208.596C150.225 200.604 150.225 187.646 142.233 179.653L127.761 165.182C111.777 149.197 111.777 123.28 127.761 107.296C143.746 91.3105 143.746 65.3939 127.761 49.4091L113.29 34.9375C105.297 26.9452 105.297 13.9868 113.29 5.99432C121.282 -1.99811 134.241 -1.99811 142.233 5.99434L243.533 107.296C259.519 123.28 259.519 149.197 243.533 165.182L156.705 252.012ZM200.119 121.767C192.127 113.775 179.168 113.775 171.176 121.767C163.184 129.76 163.184 142.718 171.176 150.71C179.168 158.703 192.127 158.703 200.119 150.71C208.112 142.718 208.112 129.76 200.119 121.767Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
background-size: contain;
#dg-floating-menu-button {
align-items: center;
background-color: #f8f9fa;
background-image: url("data:image/svg+xml,%3Csvg width='256' height='264' viewBox='0 0 256 264' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M156.705 252.012C140.72 267.995 114.803 267.995 98.8183 252.012L11.9887 165.182C-3.99622 149.197 -3.99622 123.28 11.9886 107.296L55.4035 63.8807C63.3959 55.8881 76.3541 55.8881 84.3467 63.8807C92.3391 71.8731 92.3391 84.8313 84.3467 92.8239L69.8751 107.296C53.8901 123.28 53.8901 149.197 69.8751 165.182L113.29 208.596C121.282 216.589 134.241 216.589 142.233 208.596C150.225 200.604 150.225 187.646 142.233 179.653L127.761 165.182C111.777 149.197 111.777 123.28 127.761 107.296C143.746 91.3105 143.746 65.3939 127.761 49.4091L113.29 34.9375C105.297 26.9452 105.297 13.9868 113.29 5.99432C121.282 -1.99811 134.241 -1.99811 142.233 5.99434L243.533 107.296C259.519 123.28 259.519 149.197 243.533 165.182L156.705 252.012ZM200.119 121.767C192.127 113.775 179.168 113.775 171.176 121.767C163.184 129.76 163.184 142.718 171.176 150.71C179.168 158.703 192.127 158.703 200.119 150.71C208.112 142.718 208.112 129.76 200.119 121.767Z' fill='%235C7080'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 18px 18px;
background-position: center;
border-color: "#ccc";
border-radius: 100%;
border-width: 1;
cursor: pointer;
display: inline-block;
font-family: inherit;
font-size: 100%;
font-weight: inherit;
height: 35px;
justify-content: center;
line-height: inherit;
margin-right: 8px;
margin: 0;
padding: 4px;
vertical-align: middle;
white-space: nowrap;
width: 35px;
-webkit-tap-highlight-color: transparent;
}

#discourse-floating-menu .caret {
Expand Down