diff --git a/.gitignore b/.gitignore index 0a419200..d3437f20 100644 --- a/.gitignore +++ b/.gitignore @@ -31,5 +31,8 @@ venv.bak/ # Javascript stuff node_modules/ +# Build outputs +dist-gdocs/ + # Data *.db diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js index ac8844aa..f2380de4 100644 --- a/frontend/eslint.config.js +++ b/frontend/eslint.config.js @@ -8,7 +8,7 @@ import officeAddinsPlugin from 'eslint-plugin-office-addins'; export default [ // Global ignores { - ignores: ['dist/**', 'build/**', 'node_modules/**', 'coverage/**'] + ignores: ['dist/**', 'dist-gdocs/**', 'build/**', 'node_modules/**', 'coverage/**'] }, // Base JavaScript configuration for all files diff --git a/frontend/src/editor/editor.html b/frontend/src/editor/editor.html index 3a49bf70..9b175882 100644 --- a/frontend/src/editor/editor.html +++ b/frontend/src/editor/editor.html @@ -1,27 +1,28 @@ - - - - Editor - - - -
- - + + + + Editor + + + + +
+ + + \ No newline at end of file diff --git a/frontend/src/editor/editor.module.css b/frontend/src/editor/editor.module.css index 582cad00..90feddc3 100644 --- a/frontend/src/editor/editor.module.css +++ b/frontend/src/editor/editor.module.css @@ -9,7 +9,8 @@ text-align: left; box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3); padding: 10px; - height: 80vh; + flex: 1; + min-height: 0; } .placeholder { diff --git a/frontend/src/editor/index.tsx b/frontend/src/editor/index.tsx index 76b5adcc..43921c55 100644 --- a/frontend/src/editor/index.tsx +++ b/frontend/src/editor/index.tsx @@ -22,11 +22,13 @@ export function EditorScreen({ editorPreamble, contextData, falseContextData, + doneButton, }: { taskID?: string; editorPreamble?: JSX.Element; contextData?: ContextSection[]; falseContextData?: ContextSection[]; + doneButton?: JSX.Element; }) { const mode = useAtomValue(overallModeAtom); const username = useAtomValue(usernameAtom); @@ -158,12 +160,19 @@ export function EditorScreen({ ) : null} -
- - - +
+
+ + + +
+ {doneButton ? ( +
+ {doneButton} +
+ ) : null}
); diff --git a/frontend/src/editor/studyRouter.tsx b/frontend/src/editor/studyRouter.tsx index 2333fec9..39ae35fb 100644 --- a/frontend/src/editor/studyRouter.tsx +++ b/frontend/src/editor/studyRouter.tsx @@ -64,14 +64,14 @@ function SurveyPage({ title, basename, questions, username, redirectURL, childre questions={questions} onAdvance={(surveyData: Record) => { logThenRedirect({ - username: username, - event: `surveyComplete:${basename}`, - surveyData: surveyData, - }, redirectURL); - }} - /> - - ); + username: username, + event: `surveyComplete:${basename}`, + surveyData: surveyData, + }, redirectURL); + }} + /> + + ); } @@ -133,10 +133,10 @@ export function StudyRouter({ page }: { page: string }) { } const nextPage = studyPageNames[studyPageIndex + 1] || 'study-intro'; - const nextUrlParams = new URLSearchParams(window.location.search); - nextUrlParams.set('page', nextPage); + const nextUrlParams = new URLSearchParams(window.location.search); + nextUrlParams.set('page', nextPage); const nextPageURL = `${window.location.origin}/editor.html?${nextUrlParams.toString()}`; - const isProlific = urlParams.get('isProlific') === 'true'; + const isProlific = urlParams.get('isProlific') === 'true'; if (page === 'study-consentForm') { return ( @@ -250,37 +250,40 @@ export function StudyRouter({ page }: { page: string }) { })); const editorPreamble = ( - <> - {curTaskContexts.map((section, index) => ( - // biome-ignore lint/suspicious/noArrayIndexKey: it will actually be mostly stable. -
-

{section.title}

-

{section.content}

-
- ))} -

Write Here

- - ); + <> + {curTaskContexts.map((section, index) => ( + // biome-ignore lint/suspicious/noArrayIndexKey: it will actually be mostly stable. +
+

{section.title}

+

{section.content}

+
+ ))} +

Write Here

+ + ); return ( -
- - - -
+ { + logThenRedirect({ + username: username, + event: 'taskComplete', + condition: conditionName, + // TODO: add the document text here + }, nextPageURL); + }} + className={classes.doneButton} + > + I'm Done (I've written about 200 words) + + } + /> ); } else if (page.startsWith('study-postTask')) { const postTaskSurveyQuestions: QuestionType[] = []; diff --git a/frontend/src/editor/styles.module.css b/frontend/src/editor/styles.module.css index 4d3d0698..149c9331 100644 --- a/frontend/src/editor/styles.module.css +++ b/frontend/src/editor/styles.module.css @@ -4,20 +4,24 @@ font-family: 'Segoe UI', sans-serif, Arial, Helvetica; display: flex; flex-direction: row; + height: 100vh; + overflow: hidden; } .editor { flex: 1; min-width: 15rem; max-width: 60rem; + overflow-y: auto; + display: flex; + flex-direction: column; } /* Sidebar for editor and study page */ .sidebar { - flex: 0 1 28rem; - min-width: 14rem; + flex: 1; margin: 20px 0px 20px 0px; - height: 80vh; + min-height: 0; box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3); font-family: 'Segoe UI', sans-serif, Arial, Helvetica; right: 0; @@ -39,6 +43,8 @@ display: flex; justify-content: center; font-family: 'Segoe UI', sans-serif, Arial, Helvetica; + height: 100vh; + overflow: hidden; } .demoeditor { @@ -46,14 +52,15 @@ max-width: 40rem; width: 100%; position: relative; + display: flex; + flex-direction: column; } /* Sidebar for demo page */ .demosidebar { - margin: 20px; - height: 80vh; - width: 28rem; - min-width: 28rem; + margin: 20px 0; + flex: 1; + min-height: 0; box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', sans-serif, Arial, Helvetica; background-color: white; @@ -132,14 +139,9 @@ background-color: #0078d4; color: white; border: none; - padding: 0.5rem 1rem; + padding: 0.75rem 2rem; border-radius: 0.25rem; cursor: pointer; font-size: 1rem; - position: fixed; - bottom: 1rem; - right: 1rem; - z-index: 1000; - transform: translateX(-2rem); /* border: #d32f2f 1px solid; */ } \ No newline at end of file diff --git a/frontend/tests/demo-page-visual.spec.ts-snapshots/demo-page-chromium-linux.png b/frontend/tests/demo-page-visual.spec.ts-snapshots/demo-page-chromium-linux.png index e50eff4e..24ac0141 100644 Binary files a/frontend/tests/demo-page-visual.spec.ts-snapshots/demo-page-chromium-linux.png and b/frontend/tests/demo-page-visual.spec.ts-snapshots/demo-page-chromium-linux.png differ diff --git a/frontend/tests/demo-page-visual.spec.ts-snapshots/demo-page-firefox-linux.png b/frontend/tests/demo-page-visual.spec.ts-snapshots/demo-page-firefox-linux.png index 3637d885..0cbaf035 100644 Binary files a/frontend/tests/demo-page-visual.spec.ts-snapshots/demo-page-firefox-linux.png and b/frontend/tests/demo-page-visual.spec.ts-snapshots/demo-page-firefox-linux.png differ diff --git a/frontend/tests/demo-page-visual.spec.ts-snapshots/demo-page-webkit-linux.png b/frontend/tests/demo-page-visual.spec.ts-snapshots/demo-page-webkit-linux.png index daf9596c..9c210b09 100644 Binary files a/frontend/tests/demo-page-visual.spec.ts-snapshots/demo-page-webkit-linux.png and b/frontend/tests/demo-page-visual.spec.ts-snapshots/demo-page-webkit-linux.png differ diff --git a/frontend/tests/draft-flows.spec.ts b/frontend/tests/draft-flows.spec.ts index b4d650c7..1a0226cf 100644 --- a/frontend/tests/draft-flows.spec.ts +++ b/frontend/tests/draft-flows.spec.ts @@ -77,7 +77,7 @@ test.describe('Draft component - Main flows', () => { await expect(frame.getByText('First example suggestion')).toBeVisible({ timeout: 5000 }); // Delete example suggestion - const deleteButton1 = frame.locator('button[aria-label="Delete saved item"]').first(); + const deleteButton1 = frame.locator('button[aria-label="Delete suggestion"]').first(); await deleteButton1.click(); await expect(frame.getByText('First example suggestion')).not.toBeVisible({ timeout: 2000 }); @@ -86,7 +86,7 @@ test.describe('Draft component - Main flows', () => { await expect(frame.getByText('First reader perspective')).toBeVisible({ timeout: 5000 }); // Delete reader perspective suggestion - const deleteButton2 = frame.locator('button[aria-label="Delete saved item"]').first(); + const deleteButton2 = frame.locator('button[aria-label="Delete suggestion"]').first(); await deleteButton2.click(); await expect(frame.getByText('First reader perspective')).not.toBeVisible({ timeout: 2000 }); @@ -95,7 +95,7 @@ test.describe('Draft component - Main flows', () => { await expect(frame.getByText('First piece of advice')).toBeVisible({ timeout: 5000 }); // Delete advice suggestion - const deleteButton3 = frame.locator('button[aria-label="Delete saved item"]').first(); + const deleteButton3 = frame.locator('button[aria-label="Delete suggestion"]').first(); await deleteButton3.click(); await expect(frame.getByText('First piece of advice')).not.toBeVisible({ timeout: 2000 }); });