weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: better toolbar descriptions

Browse Source
This commit is contained in:
Davide Passoni 2024-12-12 17:06:28 +01:00
parent f84b560351
commit 032b74b57b
3 changed files with 24 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/react/src/constants/constants.ts
View File

@ -504,7 +504,7 @@ export namespace ContextActions {
export const PATH = new ContextAction(
"path",
"Create route",
"Click on the map to add a destination add the end of the path. This allows to create a more complex route.",
"Click on the map to add a destination at the end of the path. This allows to create a more complex route.",
faRoute,
ContextActionTarget.POINT,
(units: Unit[], _, targetPosition) => {

42
frontend/react/src/ui/panels/maptoolbar.tsx
View File

@ -78,8 +78,8 @@ export function MapToolBar(props: {}) {
{options.ctrlKey && (
<kbd
className={`
my-auto ml-auto text-nowrap rounded-lg border border-gray-200
bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-800
my-auto text-nowrap rounded-lg border border-gray-200 bg-gray-100
px-2 py-1 text-xs font-semibold text-gray-800
dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100
`}
>
@ -89,8 +89,8 @@ export function MapToolBar(props: {}) {
{options.altKey && (
<kbd
className={`
my-auto ml-auto text-nowrap rounded-lg border border-gray-200
bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-800
my-auto text-nowrap rounded-lg border border-gray-200 bg-gray-100
px-2 py-1 text-xs font-semibold text-gray-800
dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100
`}
>
@ -100,8 +100,8 @@ export function MapToolBar(props: {}) {
{options.shiftKey && (
<kbd
className={`
my-auto ml-auto text-nowrap rounded-lg border border-gray-200
bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-800
my-auto text-nowrap rounded-lg border border-gray-200 bg-gray-100
px-2 py-1 text-xs font-semibold text-gray-800
dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100
`}
>
@ -112,8 +112,8 @@ export function MapToolBar(props: {}) {
{options.code && (
<kbd
className={`
my-auto ml-auto text-nowrap rounded-lg border border-gray-200
bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-800
my-auto text-nowrap rounded-lg border border-gray-200 bg-gray-100
px-2 py-1 text-xs font-semibold text-gray-800
dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100
`}
>
@ -153,10 +153,7 @@ export function MapToolBar(props: {}) {
checked={selectionEnabled}
icon={faObjectGroup}
tooltip={() => (
<div
className="overflow-hidden"
style={{ animationName: "fadeIn", animationDuration: "1s", animationFillMode: "forwards", height: "25px" }}
>
<div>
<div className="flex content-center gap-2">
{shortcutCombination(shortcuts["toggleSelectionEnabled"]?.getOptions())}
<div className="my-auto">Box selection</div>
@ -229,14 +226,19 @@ export function MapToolBar(props: {}) {
icon={contextActionIt.getIcon()}
tooltip={() => (
<div
className="overflow-hidden"
style={{ animationName: "tooltipFadeInHeight", animationDuration: "1s", animationFillMode: "forwards", height: "25px" }}
>
<div className="flex content-center gap-2">
{shortcutCombination(contextActionIt.getOptions())}
<div className="my-auto">{contextActionIt.getLabel()}</div>
</div>
<div className={"max-w-[200px] text-wrap"} style={{ animationName: "tooltipFadeInWidth", animationDuration: "1s", animationFillMode: "forwards", width: "1px" }}>{contextActionIt.getDescription()}</div>
className="overflow-hidden"
style={{ animationName: "tooltipFadeInHeight", animationDuration: "1s", animationFillMode: "forwards", height: "26px" }}
>
<div className="mb-4 flex h-6 content-center gap-2">
{shortcutCombination(contextActionIt.getOptions())}
<div className="my-auto">{contextActionIt.getLabel()}</div>
</div>
<div
className={"max-w-[200px] text-wrap"}
style={{ animationName: "tooltipFadeInWidth", animationDuration: "1s", animationFillMode: "forwards", width: "1px" }}
>
{contextActionIt.getDescription()}
</div>
</div>
)}
tooltipPosition="side"

2
frontend/react/src/ui/ui.css
View File

@ -107,7 +107,7 @@ input[type="range"]:focus::-moz-range-thumb {
@keyframes tooltipFadeInHeight {
99% {
height: 25px;
height: 26px;
}
100% {
height: fit-content;