-
Notifications
You must be signed in to change notification settings - Fork 580
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.
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
teacher tool: add address bar #9839
Merged
Merged
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit
Hold shift + click to select a range
763ab95
add address bar
eanders-ms fe19910
prettier
eanders-ms 4fc0d7b
remove left/right pane css props
eanders-ms 5e9bbff
remove visible & hidden css classes
eanders-ms acc6df9
rename AddressBar -> ShareLinkInput
eanders-ms 706b33f
remove unneeded classList
eanders-ms fe42143
removed composable layout classes
eanders-ms File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
import * as React from "react"; | ||
// eslint-disable-next-line import/no-internal-modules | ||
import css from "./styling/ProjectWorkspace.module.scss"; | ||
|
||
import { Toolbar } from "./Toolbar"; | ||
import { ShareLinkInput } from "./ShareLinkInput"; | ||
import { MakeCodeFrame } from "./MakecodeFrame"; | ||
import { classes } from "../utils"; | ||
|
||
interface IProps {} | ||
|
||
export const ProjectWorkspace: React.FC<IProps> = () => { | ||
return ( | ||
<div className={classes(css, "panel", "h-full", "w-full", "flex", "flex-col")}> | ||
<Toolbar toolbarClass={css["grow-1"]}> | ||
{/* Left */} | ||
<></> | ||
{/* Center */} | ||
<></> | ||
{/* Right */} | ||
<></> | ||
</Toolbar> | ||
<ShareLinkInput className={css["grow-1"]} /> | ||
<MakeCodeFrame /> | ||
</div> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import * as React from "react"; | ||
// eslint-disable-next-line import/no-internal-modules | ||
import css from "./styling/RubricWorkspace.module.scss"; | ||
|
||
import { DebugInput } from "./DebugInput"; | ||
import { EvalResultDisplay } from "./EvalResultDisplay"; | ||
import { ActiveRubricDisplay } from "./ActiveRubricDisplay"; | ||
|
||
interface IProps {} | ||
|
||
export const RubricWorkspace: React.FC<IProps> = () => { | ||
return ( | ||
<> | ||
<DebugInput /> | ||
<ActiveRubricDisplay /> | ||
<EvalResultDisplay /> | ||
</> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
import * as React from "react"; | ||
// eslint-disable-next-line import/no-internal-modules | ||
import css from "./styling/ShareLinkInput.module.scss"; | ||
|
||
import { useContext, useState, useMemo, useCallback, useEffect } from "react"; | ||
import { AppStateContext } from "../state/appStateContext"; | ||
import { classList } from "react-common/components/util"; | ||
import { Input } from "react-common/components/controls/Input"; | ||
import { loadProjectMetadataAsync } from "../transforms/loadProjectMetadataAsync"; | ||
|
||
interface IProps { | ||
className?: string; | ||
} | ||
|
||
export const ShareLinkInput: React.FC<IProps> = ({ className }) => { | ||
const { state: teacherTool } = useContext(AppStateContext); | ||
const { projectMetadata } = teacherTool; | ||
const [text, setText] = useState(""); | ||
const [iconVisible, setIconVisible] = useState(false); | ||
|
||
useEffect(() => { | ||
const shareId = pxt.Cloud.parseScriptId(text); | ||
setIconVisible(!!shareId && !(shareId === projectMetadata?.shortid || shareId === projectMetadata?.persistId)); | ||
}, [text, projectMetadata?.shortid, projectMetadata?.persistId]); | ||
|
||
const onTextChange = (str: string) => { | ||
setText(str); | ||
}; | ||
|
||
const onEnterKey = useCallback(() => { | ||
const shareId = pxt.Cloud.parseScriptId(text); | ||
if (!!shareId && !(shareId === projectMetadata?.shortid || shareId === projectMetadata?.persistId)) { | ||
loadProjectMetadataAsync(shareId); | ||
} | ||
}, [text, projectMetadata?.shortid, projectMetadata?.persistId]); | ||
|
||
const icon = useMemo(() => { | ||
return iconVisible ? "fas fa-arrow-right" : undefined; | ||
}, [iconVisible]); | ||
|
||
return ( | ||
<div className={classList(css["address-bar"], className)}> | ||
<Input | ||
placeholder={lf("Enter Project Link or Share ID")} | ||
ariaLabel={lf("Enter Project Link or Share ID")} | ||
icon={icon} | ||
onChange={onTextChange} | ||
onEnterKey={onEnterKey} | ||
preserveValueOnBlur={true} | ||
></Input> | ||
</div> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import * as React from "react"; | ||
// eslint-disable-next-line import/no-internal-modules | ||
import css from "./styling/Toolbar.module.scss"; | ||
|
||
import { classList } from "react-common/components/util"; | ||
|
||
interface IProps { | ||
children: React.ReactNode; | ||
toolbarClass?: string; | ||
leftClass?: string; | ||
centerClass?: string; | ||
rightClass?: string; | ||
} | ||
|
||
export const Toolbar: React.FC<IProps> = ({ children, toolbarClass, leftClass, centerClass, rightClass }) => { | ||
const [left, center, right] = React.Children.toArray(children); | ||
return ( | ||
<div className={classList(css["toolbar"], toolbarClass)}> | ||
<div className={classList(css["left"], leftClass)}>{left}</div> | ||
<div className={classList(css["center"], centerClass)}>{center}</div> | ||
<div className={classList(css["right"], rightClass)}>{right}</div> | ||
</div> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
.makecode-frame { | ||
width: 100%; | ||
height: 100%; | ||
margin: 0; | ||
padding: 0; | ||
border: none; | ||
} |
9 changes: 9 additions & 0 deletions
9
teachertool/src/components/styling/ProjectWorkspace.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
@import "shared"; | ||
|
||
.panel { | ||
background-color: var(--pxt-headerbar-accent-smoke); | ||
|
||
iframe { | ||
flex: 1 1 0%; | ||
} | ||
} |
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is it valuable to create a styling module for something that's empty right now? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It won't be empty for long. |
Empty file.
62 changes: 62 additions & 0 deletions
62
teachertool/src/components/styling/ShareLinkInput.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
.address-bar { | ||
display: flex; | ||
flex-direction: row; | ||
align-items: center; | ||
height: 3.625rem; | ||
background-color: var(--pxt-content-background); | ||
color: var(--pxt-content-foreground); | ||
padding: 0 1rem 0 1rem; | ||
border-top: solid 1px var(--pxt-content-accent); | ||
|
||
div[class="common-input-wrapper"] { | ||
width: 100%; | ||
|
||
div[class="common-input-group"] { | ||
border-radius: 99px; | ||
border: solid 1px var(--pxt-content-accent); | ||
padding: 0 1rem 0 1rem; | ||
|
||
&:focus::after { | ||
outline: none; | ||
border-radius: 99px; | ||
border: solid 2px var(--pxt-headerbar-accent-smoke); | ||
} | ||
&:focus-within::after { | ||
outline: none; | ||
border-radius: 99px; | ||
border: solid 2px var(--pxt-headerbar-accent-smoke); | ||
} | ||
|
||
input { | ||
width: 100%; | ||
font-size: 1rem; | ||
padding-left: 0; | ||
|
||
&::placeholder { | ||
color: var(--pxt-content-accent); | ||
font-style: italic; | ||
text-align: center; | ||
} | ||
} | ||
|
||
i { | ||
background-color: var(--pxt-content-background); | ||
border-radius: 99px; | ||
width: 1.5rem; | ||
height: 1.5rem; | ||
top: 0; | ||
bottom: 0; | ||
right: 0.25rem; | ||
margin-top: auto; | ||
margin-bottom: auto; | ||
|
||
&::before { | ||
font-size: 1rem; | ||
line-height: 1.5rem; | ||
color: var(--pxt-content-foreground); | ||
filter: saturate(0%); | ||
} | ||
} | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
|
||
|
||
.toolbar { | ||
display: flex; | ||
flex-direction: row; | ||
justify-content: space-between; | ||
height: 2.625rem; | ||
background-color: var(--pxt-content-background); | ||
color: var(--pxt-content-foreground); | ||
} | ||
|
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I know this is a placeholder, but I was wondering if the project view toggle we're going to fill in here is something we'll be able to do in v1? Is the toggle just so a teacher can look at a student's project in JavaScript? Would it be clear that they can't validate projects in JavaScript?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
They actually can still validate a project even after switching to JS. It'll still validate the blocks, but it should all still work. It won't work well if a project was made in Javascript instead of blocks, but I think that's a different scenario.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, I'm worried the toggle will give the impression that we support evaluating JavaScript-only projects, but this is an assumption. I imagine a scenario where a teacher sees the toggle, thinks "Oh, I can validate student projects in JavaScript, too", uploads a JavaScript-only project and then the evaluation doesn't work. But, if a teacher uploads a JavaScript project, that's something that we can know, right? And just error and tell the user "sorry, we cannot evaluate JavaScript-made projects at this time".
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I wouldn't worry about it too much for v1, but yes I think we can check the preferred editor and error if needed.
I think there is value in having the toggle regardless, as one teacher did mention they like to switch to JS to search for things in the code, rather than scrolling through blocks, so there's a known use-case there.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good point Sarah. I'd like to leave this as an open design question for now. I'll add it to the work board to track.