diff --git a/src/assets/scss/App.scss b/src/assets/scss/App.scss index a5b8ab3..4252fd3 100644 --- a/src/assets/scss/App.scss +++ b/src/assets/scss/App.scss @@ -21,20 +21,26 @@ align-items: center; margin-bottom: 7px; margin-top: 7px; + &.location-picker-label { + margin-top: 12px; + } + &.latitude { + margin-bottom:12px; + } } .tab-content { - // 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 // 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; position: absolute; - padding: 9px $edge-padding $edge-padding $edge-padding; + 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 { background-color: white; visibility: visible; diff --git a/src/assets/scss/header.scss b/src/assets/scss/header.scss index 922f7b4..80acea6 100644 --- a/src/assets/scss/header.scss +++ b/src/assets/scss/header.scss @@ -22,16 +22,15 @@ $about-tab-width: 60px; .tab { position: absolute; text-align: center; - padding: 5px 10px; + padding: 4px $tab-padding; cursor: pointer; color: #222; border: 1px solid #222; margin-right: -1px; - border-radius: 6px 6px 0 0; - background-color: white; + border-radius: 4px 4px 0 0; display:inline-block; bottom:-1px; - background-color: #e0e0e0; + background-color: #f0f0f0; &.active { background-color: white; @@ -51,6 +50,9 @@ $about-tab-width: 60px; &.simulation { left: $edge-padding + $location-tab-width; + &.disabled { + color: silver; + } } &.about { diff --git a/src/assets/scss/location-picker.scss b/src/assets/scss/location-picker.scss index cd35edb..195833b 100644 --- a/src/assets/scss/location-picker.scss +++ b/src/assets/scss/location-picker.scss @@ -2,10 +2,11 @@ .location-picker-label { position: relative; + margin-top:6px; .location-icon { position: absolute; left: 4px; - top: 26px; + top: 27px; z-index: 1; } } @@ -13,15 +14,15 @@ .location-picker { display:flex; position: relative; - margin-bottom: 12px; justify-content: space-between; input { padding: 5px; + height: $input-height; width: 100%; - border-radius: 4px; + border-radius: $input-border-radius; box-sizing: border-box; - border: 1.5px solid rgba($codap-teal, 0.3); + border: $input-border; padding-left: 25px; outline: none; &:active, &:focus { diff --git a/src/assets/scss/location-tab.scss b/src/assets/scss/location-tab.scss index 0ce6aa3..a4a05fa 100644 --- a/src/assets/scss/location-tab.scss +++ b/src/assets/scss/location-tab.scss @@ -1,41 +1,64 @@ @import "./vars"; .location-tab { - width: 350px; - padding:10px; + box-sizing: border-box; + width: $location-tab-width; + height: $location-tab-height; + padding: $tab-padding; + + .intro { + padding-top: 6px; + padding-bottom: 6px; + } hr { width: 100%; - margin: 10px 0; - border: none; - border-top: 1.5px solid rgba($codap-teal, 0.3); + border-top: 1px solid #aaa; + &.light { + border-top: 1px solid $codap-teal-light; + } + &.above-attrs { + margin-top:22px; + margin-bottom:20px; + } } .latitude, .longitude { - justify-content: space-between; + display: flex; + align-items: center; + label { + margin-left: auto; + text-align: right; + margin-right: 10px; + } input { - width: 250px; - padding: 5px; - border-radius: 4px; + width: 236px; + padding: 7px 8px; + border-radius: $input-border-radius; box-sizing: border-box; - border: 1.5px solid rgba($codap-teal, 0.3); + border: $input-border; } } + .or-container { + box-sizing: border-box; + position: relative; + text-align: left; + padding: $tab-padding 0px; + } + .or { - display: none; // TODO: bring this or element back + display: inline-block; + position: absolute; + top: 11px; background-color: white; - width: 40px; - padding:0px 10px; + width: 30px; + padding:0px $tab-padding + 4px; color: $codap-teal; font-weight: bold; } - .latitude { - margin-top: 12px; - } - .attributes-selection { display: flex; flex-direction: column; @@ -49,11 +72,11 @@ display: flex; flex-wrap: wrap; width: 100%; - margin-top: 10px; + margin-top: $tab-padding; gap: 3px; li.token { - padding: 6px 12px; + padding: 8px $tab-padding; border-radius: 20px; cursor: pointer; transition: background-color 0.3s, color 0.3s; @@ -63,16 +86,17 @@ &.on { background-color: $codap-teal-lightest; - color: $codap-teal; border: 1px solid $codap-teal; } &.off { background-color: white; - color: #aaa; border: 1px solid $codap-teal; } } + li.token:hover { + background-color: $codap-teal-lightest; + } } } @@ -81,10 +105,11 @@ button { background-color: white; - padding: 6px 12px; + font-family: "Montserrat", sans-serif; + font-weight: medium; + padding: 9px 12px; border-radius: 4px; margin-left: 10px; - cursor: pointer; border: 1px solid $codap-teal; color: $codap-teal; transition: background-color 0.3s, color 0.3s; @@ -98,6 +123,7 @@ &:hover:not(:disabled) { background-color: $codap-teal-light; color: white; + cursor: pointer; } } } diff --git a/src/assets/scss/simulation-tab.scss b/src/assets/scss/simulation-tab.scss index 52cba15..b34c2f1 100644 --- a/src/assets/scss/simulation-tab.scss +++ b/src/assets/scss/simulation-tab.scss @@ -1,6 +1,9 @@ @import "./vars.scss"; .simulation-tab { + padding: $tab-padding; + width: $sim-tab-width; + height: $sim-tab-height; .get-data-button { position: relative; top: -15px; diff --git a/src/assets/scss/vars.scss b/src/assets/scss/vars.scss index c45ca63..ea296ac 100644 --- a/src/assets/scss/vars.scss +++ b/src/assets/scss/vars.scss @@ -1,4 +1,20 @@ $codap-teal: #177991; $codap-teal-light: #72bfca; $codap-teal-lightest: rgba(114, 191, 202, 0.25); -$edge-padding: 4px; \ No newline at end of file +$edge-padding: 4px; + +$location-tab-width: 340px; +$location-tab-height: 630px; + +$sim-tab-width: 690px; +$sim-tab-height: $location-tab-height; + +$about-tab-width: $location-tab-width; +$about-tab-height: $location-tab-height; + +$tab-padding: 10px; +$input-height: 32px; +$input-margin: 0 0 12px 8px; +$input-border-radius: 3px; +$input-border: solid 1px rgba(23, 121, 145, 0.75); + diff --git a/src/components/App.tsx b/src/components/App.tsx index 47e1df6..a24e9d3 100755 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -60,6 +60,12 @@ export const App: React.FC = () => { const { getUniqueLocationsInCodapData } = useCodapData(); const getUniqueLocationsRef = useRef(getUniqueLocationsInCodapData); + // TODO handle click on the body to show the thing (30) + + // TODO: get this working + const enableSimTab = dataContext !== null; + console.log("|| App render: dataContext", dataContext); + const handleDayUpdateInTheSimTab = (day: number) => { currentDayLocationRef.current._dayOfYear = day; debouncedUpdateRowSelectionInCodap( @@ -128,6 +134,7 @@ export const App: React.FC = () => { ); } } + console.log("|| App: dataContextChange", values); }, [handleCaseSelectionInCodap]); useEffect(() => { @@ -143,6 +150,8 @@ export const App: React.FC = () => { }, [latitude, longitude, dayOfYear]); const handleTabClick = (tab: TabName) => { + // comment out next line during development + if (tab === "simulation" && !enableSimTab) return; setActiveTab(tab); codapInterface.sendRequest({ action: "update", @@ -180,6 +189,7 @@ export const App: React.FC = () => {
void; + showEnabled: boolean; } -export const Header: React.FC = ({ activeTab, onTabClick }) => { +export const Header: React.FC = ({ activeTab, onTabClick, showEnabled }) => { return (
= ({ activeTab, onTabClick }) => { Location
onTabClick("simulation")} > Simulation diff --git a/src/components/location-picker.tsx b/src/components/location-picker.tsx index cd9341a..a36e6b4 100644 --- a/src/components/location-picker.tsx +++ b/src/components/location-picker.tsx @@ -95,7 +95,7 @@ export const LocationPicker: React.FC = ({
= ({ handleGetDataClick }) => { + const enableGetData = latitude !== "" && longitude !== ""; + const { dataContext, handleClearData, @@ -88,27 +90,25 @@ export const LocationTab: React.FC = ({ return (
-
-

- How long is a day?
- Enter a location or coordinates to retrieve data -

+
+ How long is a day?
+ Enter a location or coordinates to retrieve data
+
-
+
OR
-
@@ -117,12 +117,12 @@ export const LocationTab: React.FC = ({
-
+
    @@ -138,12 +138,13 @@ export const LocationTab: React.FC = ({ ))) }
+
-
diff --git a/src/constants.ts b/src/constants.ts index b4fafdc..b240c13 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -2,8 +2,8 @@ export const kPluginName = "Day Length Plugin"; export const kVersion = "0.0.1"; export const kDataContextName = "DayLengthPluginData"; export const kInitialDimensions = { - width: 380, - height: 680 + width: 340, + height: 546 }; export const kSimulationTabDimensions = { width: 690, diff --git a/src/hooks/useCodapData.ts b/src/hooks/useCodapData.ts index 654fa92..bdb753a 100644 --- a/src/hooks/useCodapData.ts +++ b/src/hooks/useCodapData.ts @@ -45,7 +45,6 @@ export const useCodapData = () => { if (!existingDataContext.success) { createDC = await createDataContext(kDataContextName); - setDataContext(createDC.values); } if (existingDataContext?.success || createDC?.success) { @@ -78,8 +77,11 @@ export const useCodapData = () => { return record; }); - await createItems(kDataContextName, completeSolarRecords); + console.log("|| set dataContext here?", existingDataContext, createDC); + if (existingDataContext.success) setDataContext(existingDataContext.values); + if (createDC?.success) setDataContext(createDC.values); + console.log("|| the dataContext in the hook:", dataContext); return await createTable(kDataContextName); } };