From 3886b90704736e90ebb8112ba168735ae05ade52 Mon Sep 17 00:00:00 2001 From: pjanik Date: Thu, 29 Aug 2024 20:42:59 +0200 Subject: [PATCH 1/3] fix: fix issues with scrollbars, tabs, and dimensions in CODAP [PT-188185792] --- src/components/App.scss | 10 +++------- src/components/about-tab.scss | 1 - src/components/checkbox.tsx | 2 +- src/components/dropdown.tsx | 8 ++++---- src/components/header.scss | 1 - src/components/simulation-tab.scss | 3 +-- src/components/vars.scss | 6 +++--- src/constants.ts | 6 +++--- src/grasp-seasons/components/seasons.tsx | 23 ++++++----------------- 9 files changed, 21 insertions(+), 39 deletions(-) diff --git a/src/components/App.scss b/src/components/App.scss index 4252fd3..37773cb 100644 --- a/src/components/App.scss +++ b/src/components/App.scss @@ -32,20 +32,16 @@ .tab-content { // display: none; would be easier, but it somehow Seasons 3D view doesn't initialize itself properly // when display: none; is used. - visibility: hidden; width: 0; height: 0; + overflow: hidden; position: absolute; padding-left: 9px $edge-padding $edge-padding $edge-padding; - // note each .tab-content is a wrapper for tab.location, tab.simulation, tab.about - // eahc of which maintain their own static layout widths - // this is 100% wide to cover the space affored by CODAP window whose width can change &.active { + width: auto; + height: auto; background-color: white; - visibility: visible; - width: 100%; - height: 100%; } } } diff --git a/src/components/about-tab.scss b/src/components/about-tab.scss index 339d2f6..cf5f3c5 100644 --- a/src/components/about-tab.scss +++ b/src/components/about-tab.scss @@ -7,7 +7,6 @@ width: $location-tab-width; height: $location-tab-height; padding: $tab-padding; - height: 800px; // extend beyond enclaosing for scroll h2 { font-size: 1.2em; diff --git a/src/components/checkbox.tsx b/src/components/checkbox.tsx index d856e7f..ba1c2c8 100644 --- a/src/components/checkbox.tsx +++ b/src/components/checkbox.tsx @@ -21,7 +21,7 @@ export const Checkbox = ({ checked, onChange, label, disabled }: ICheckboxProps) return (
- +
); } diff --git a/src/components/dropdown.tsx b/src/components/dropdown.tsx index e1663c0..ec520b9 100644 --- a/src/components/dropdown.tsx +++ b/src/components/dropdown.tsx @@ -97,7 +97,7 @@ export const Dropdown = ({ return (
- +
{ @@ -116,14 +116,14 @@ export const Dropdown = ({ onClick={handleMainButtonClick} onKeyDown={handleKeyDown} > - {value} + { value }
) }
- {icon} + { icon }
{ showOptions && options.length > 0 && ( @@ -141,7 +141,7 @@ export const Dropdown = ({ }) } > - {option.name} + { option.name } )) } diff --git a/src/components/header.scss b/src/components/header.scss index 66560f5..7619d4f 100644 --- a/src/components/header.scss +++ b/src/components/header.scss @@ -12,7 +12,6 @@ $left-tab-margin: 3px; padding-top: $edge-padding; padding-left: $edge-padding; padding-right: $edge-padding; - width: 100%; margin-bottom: 0; position: relative; z-index: 1; diff --git a/src/components/simulation-tab.scss b/src/components/simulation-tab.scss index f5a29e0..e8354d8 100644 --- a/src/components/simulation-tab.scss +++ b/src/components/simulation-tab.scss @@ -1,9 +1,8 @@ @import "./vars.scss"; .simulation-tab { - padding: $tab-padding; + padding: 2px; width: $sim-tab-width; - height: $sim-tab-height; .button-container { display: flex; diff --git a/src/components/vars.scss b/src/components/vars.scss index 69ab103..7747807 100644 --- a/src/components/vars.scss +++ b/src/components/vars.scss @@ -11,15 +11,15 @@ $text-color: #222; $edge-padding: 4px; $location-tab-width: 340px; -$location-tab-height: 630px; +$location-tab-height: 485px; -$sim-tab-width: 662px; +$sim-tab-width: 660px; $sim-tab-height: $location-tab-height; $about-tab-width: $location-tab-width; $about-tab-height: $location-tab-height; -$tab-padding: 15px; +$tab-padding: 10px; $input-height: 32px; $input-margin: 0 0 12px 8px; $input-border-radius: 3px; diff --git a/src/constants.ts b/src/constants.ts index b240c13..657a3e8 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -3,11 +3,11 @@ export const kVersion = "0.0.1"; export const kDataContextName = "DayLengthPluginData"; export const kInitialDimensions = { width: 340, - height: 546 + height: 541 }; export const kSimulationTabDimensions = { - width: 690, - height: 630 + width: 665, + height: 541 }; // These are only used in the simplified sunray angle calc diff --git a/src/grasp-seasons/components/seasons.tsx b/src/grasp-seasons/components/seasons.tsx index f21163f..c1f7437 100644 --- a/src/grasp-seasons/components/seasons.tsx +++ b/src/grasp-seasons/components/seasons.tsx @@ -50,10 +50,6 @@ const DEFAULT_SIM_STATE: ISimState = { cameraTiltAngle: 89 }; -function capitalize(string: string) { - return string.charAt(0).toUpperCase() + string.slice(1); -} - interface IProps { lang?: Language; initialState?: Partial; @@ -133,13 +129,6 @@ const Seasons: React.FC = ({ lang = "en_us", initialState = {}, log = (a const simLang = simState.lang; const playStopLabel = mainAnimationStarted ? t("~STOP", simLang) : t("~ORBIT_BUTTON", simLang); - // Log helpers - const logCheckboxChange = (event: ChangeEvent) => { - log(capitalize(event.target.name) + "CheckboxChanged", { - value: event.target.checked - }); - }; - // Keep updating lang in simState when lang prop changes useEffect(() => { setSimState(prevState => ({ ...prevState, lang })); @@ -260,7 +249,7 @@ const Seasons: React.FC = ({ lang = "en_us", initialState = {}, log = (a inline={true} width="130px" - label={ t("~VIEW", simLang) } + label={t("~VIEW", simLang)} options={[ { name: t("~EARTH_ORBIT", simLang), value: "false" }, { name: t("~EARTH_CLOSE_UP", simLang), value: "true" } @@ -283,7 +272,7 @@ const Seasons: React.FC = ({ lang = "en_us", initialState = {}, log = (a setSimState(prevState => ({ ...prevState, dailyRotation: checked }))} - label={ t("~DAILY_ROTATION", simLang) } + label={t("~DAILY_ROTATION", simLang)} disabled={!mainAnimationStarted} />
@@ -312,8 +301,8 @@ const Seasons: React.FC = ({ lang = "en_us", initialState = {}, log = (a { getFormattedDay() } - - + +
= ({ lang = "en_us", initialState = {}, log = (a - = 90}> + = 90}>
= ({ lang = "en_us", initialState = {}, log = (a - = 180}> + = 180}> Date: Thu, 29 Aug 2024 20:54:47 +0200 Subject: [PATCH 2/3] Change title in title bar [PT-188158218] --- src/constants.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/constants.ts b/src/constants.ts index 657a3e8..ff8d154 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -1,4 +1,4 @@ -export const kPluginName = "Day Length Plugin"; +export const kPluginName = "Day Length"; export const kVersion = "0.0.1"; export const kDataContextName = "DayLengthPluginData"; export const kInitialDimensions = { From 883913fad3dca82c355e9d3b685732df345df693 Mon Sep 17 00:00:00 2001 From: pjanik Date: Thu, 29 Aug 2024 21:04:51 +0200 Subject: [PATCH 3/3] fix: fix z-index of the dropdown options [PT-188162567] --- src/components/dropdown.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/dropdown.scss b/src/components/dropdown.scss index 204e490..62af044 100644 --- a/src/components/dropdown.scss +++ b/src/components/dropdown.scss @@ -105,7 +105,7 @@ .day-length-dropdown-options { $padding: 4px; - z-index: 1; + z-index: 100; position: absolute; background-color: white; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);