Skip to content
This repository has been archived by the owner on Sep 27, 2024. It is now read-only.

Commit

Permalink
Merge pull request #357 from SELab-2/UX-fixes
Browse files Browse the repository at this point in the history 
Enkele UX fixes
  • Loading branch information
@matt01y
matt01y authored May 23, 2024
2 parents 1cd67b1 + f394d1f commit ce08962
Show file tree
Hide file tree
Showing 12 changed files with 156 additions and 78 deletions.
19 changes: 12 additions & 7 deletions frontend/public/locales/en/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,12 +100,15 @@
},
"menu": {
"remove": "remove",
"file": "FILE",
"directory": "DIRECTORY",
"zip": "ZIP",
"not_present": "NOT_PRESENT",
"extension_not_present": "EXTENSION_NOT_PRESENT",
"extension_only_present": "EXTENSION_ONLY_PRESENT"
"file": "to 'file'",
"directory": "to 'directory'",
"zip": "to 'zip'",
"not_present": "to 'not present'",
"extension_not_present": "to 'extension not present'",
"extension_only_present": "to 'extension only present'",
"info-not_present": "this name may not appear in the zip/folder in which this constraint is located",
"info-extension_not_present": "files with this extension may not appear in the zip/folder in which this constraint is located",
"info-extension_only_present": "in the zip/folder in which this constraint is located, only files with this extension are allowed"
},
"warning_change_root": {
"type_switch": "All current file-specifications will be removed. Are you sure you want to change the type of the root?"
Expand All @@ -116,6 +119,7 @@
"information": {
"title": "Information",
"constraints": "You can edit the value of a contraint by clicking on it. By hovering over a constraint, more operations will appear.",
"global-local": "Global constraints apply to all files in the submission. Local constraints only apply in the zip/folder in which they are located.",
"extensions": "Please begin extension names with a dot.",
"color_codes": {
"title": "color codes:",
Expand Down Expand Up @@ -170,7 +174,7 @@
"name": "Name",
"email": "Email",
"latest_submission": "Latest submission",
"amount_of_members": "Amount of members per group"
"amount_of_members": "Amount of members per group:"
},
"submission": {
"tag": "Submission",
Expand All @@ -179,6 +183,7 @@
"confirm": "Confirm",
"save": "Save",
"submit": "Submit",
"submitted": "The submission has been successful",
"failed-submission": "The submission failed with error:",
"download-current": "Download latest submission",
"failed": "Failed",
Expand Down
18 changes: 11 additions & 7 deletions frontend/public/locales/nl/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,19 +100,23 @@
},
"menu": {
"remove": "verwijderen",
"file": "BESTAND",
"directory": "FOLDER",
"zip": "ZIP",
"not_present": "NIET_AANWEZIG",
"extension_not_present": "EXTENSIE_NIET_AANWEZIG",
"extension_only_present": "EXTENSIE_ENKEL_AANWEZIG"
"file": "maak 'bestand'",
"directory": "maak 'folder'",
"zip": "maak 'zip'",
"not_present": "maak 'niet-aanwezig'",
"extension_not_present": "maak 'extensie niet aanwezig'",
"extension_only_present": "maak 'extensie enkel aanwezig'",
"info-not_present": "deze naam mag niet voorkomen in zip/folder waarin deze voorwaarde zich bevindt",
"info-extension_not_present": "files met deze extensie mogen niet voorkomen in zip/folder waarin deze voorwaarde zich bevindt",
"info-extension_only_present": "in zip/folder waarin deze voorwaarde zich bevindt mogen enkel files met deze extensie komen"
},
"warning_change_root": {
"type_switch": "Alle huidige bestand-specificaties zullen verwijderd worden. Ben je zeker dat je het type van de root wil veranderen"
},
"information": {
"title": "Informatie",
"constraints": "Je kan de waarde van een voorwaarde veranderen door er op te klikken. Beweeg je cursor over een voorwaarde om meer opties te krijgen.",
"global-local": "Globale voorwaarden worden toegepast op alle bestanden in de indiening. Lokale voorwaarden slechts in de zip/folder waarin ze zich bevinden.",
"extensions": "Begin extensie-namen telkens met een punt.",
"color_codes": {
"title": "kleurencodes:",
Expand Down Expand Up @@ -167,7 +171,7 @@
"name": "Naam",
"email": "Email",
"latest_submission": "Laatste indiening",
"amount_of_members": "Aantal leden per groep"
"amount_of_members": "Aantal leden per groep:"
},
"submission": {
"tag": "Indiening",
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/assets/styles/SimpleTests/information.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,6 @@
word-wrap: break-word;
white-space: pre-wrap;
word-break: break-word;
max-height: 250px;
max-height: 400px;
overflow-y: auto;
}
17 changes: 17 additions & 0 deletions frontend/src/assets/styles/SimpleTests/simple_checks.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,12 +127,29 @@
}
.NOT_PRESENT {
text-shadow: 2px 2px 4px rgba(0, 4, 255, 0.7);
min-width: 130px;
margin-right: 20px;
}
.EXTENSION_NOT_PRESENT {
text-shadow: 2px 2px 4px rgba(0, 255, 55, 0.7);
min-width: 130px;
margin-right: 20px;
}
.EXTENSION_ONLY_PRESENT {
text-shadow: 2px 2px 4px rgba(255, 4, 0, 0.7);
min-width: 130px;
margin-right: 20px;
}

.info-colorcodes-row {
display: flex;
flex-direction: row;
}

.bullet-list > *::before {
content: "• "; /* Unicode bullet character */
margin-right: 0.5em; /* Space between bullet and text */
color: black; /* Bullet color */
}

/* =============================================== */
Expand Down
9 changes: 9 additions & 0 deletions frontend/src/assets/styles/students_components.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,4 +92,13 @@
.fixated-filler {
height: 60px;
background-color: white;
}

.file-chooser-first {
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
.file-chooser-second {
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
}
9 changes: 7 additions & 2 deletions frontend/src/assets/styles/teacher_components.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,10 @@

.create-project-topbar {
position: fixed;
width: calc(100% - var(--sidebar-width) - 20px);
z-index: 10;
background-color: white;
padding: 10px 20px;
display:flex
display: flex;
}

.create-project-content {
Expand Down Expand Up @@ -51,4 +50,10 @@
border: solid !important;
border-width: 1px !important;
border-color: hsla(0, 0%, 0%, 0.15) !important;
}

.teamwork {
display: flex;
flex-direction: column;
gap: 5px;
}
58 changes: 29 additions & 29 deletions frontend/src/components/ProjectStudentComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {make_submission} from "../utils/api/Submission.ts";
import {joinGroup, leaveGroup} from "../utils/api/Groups.ts";
import {getGroupInfo, loadGroupMembers} from "../dataloaders/ProjectsStudentLoader.ts";
import SimpleTests from "./SimpleTests/SimpleTests.tsx";
import { TeacherOrStudent } from "./SimpleTests/TeacherOrStudentEnum.tsx";
import {TeacherOrStudent} from "./SimpleTests/TeacherOrStudentEnum.tsx";

function ProjectInfo(props: { project: ProjectStudent }): JSX.Element {
const {t} = useTranslation();
Expand Down Expand Up @@ -290,47 +290,47 @@ export default function ProjectStudentComponent(props: { project: ProjectStudent
<div className="field-body">
<ul className="field">
<div className="submission-file-download-upload">

{newSelectedFile &&
<label className={"mr-3"}>{file?.name}</label>
{submission != null &&
<button className="button" onClick={() => void downloadLatestSubmission()}>
<span className="mr-2"><FaDownload/></span>
<span>{t('project.download-current')}</span>
</button>
}
<div id="file-js" className="field is-horizontal">
<div id="file-js" className="field is-horizontal ">
<label className="file-label">
<input className="file-input" type="file" name="resume"
ref={fileInputRef}
onChange={selectFile}/>
<span className="file-cta">
<span className="file-icon"><FaUpload/></span>
<span
className="file-label">{t('project.submission.choose_file')}</span>
onChange={selectFile}
/>
<span className="file-cta file-chooser-first">
<span className="file-icon">
<FaUpload/>
</span>
<span className="file-label">
{t('project.submission.choose_file')}
</span>
</span>
{newSelectedFile &&
<span className={"file-name mr-3 file-chooser-second"}>
{file?.name}
</span>
}
</label>
</div>
{submission != null &&
<button className="button" onClick={() => void downloadLatestSubmission()}>
<span className="mr-2"><FaDownload/></span>
<span>{t('project.download-current')}</span>
</button>
}

{newSelectedFile && hasGroup &&
<div className={"is-flex is-justify-content-end"}>
<RegularButton
placeholder={t('project.submit')}
add={false}
onClick={() => void submitFile()}
styling="is-primary"/>
</div>}
</div>
</ul>
</div>
</div>
</>}
{newSelectedFile && hasGroup &&
<div>
<div className={"fixated is-flex is-justify-content-start"}>
<RegularButton
placeholder={t('project.submit')}
add={false}
onClick={() => void submitFile()}
styling="is-primary"/>
</div>
<div className="fixated-filler"/>
</div>}
<div className="p-5"/>

</div>
);
}
51 changes: 31 additions & 20 deletions frontend/src/components/ProjectTeacherComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,14 @@ import {RegularButton} from "./RegularButton.tsx";
import {FaDownload} from "react-icons/fa6";
import _ from 'lodash';
import { FaEraser } from "react-icons/fa";
import { getScrollbarWidth } from "../utils/ScrollBarWidth.ts";
import Switch from "react-switch";

export function ProjectTeacherComponent(props: {
project: ProjectTeacher,
submission_statistics: {[key: number]: number} | undefined,
download_all_submissions: (() => Promise<void>) | undefined
is_new?: boolean
}): JSX.Element {

const {t} = useTranslation();
Expand Down Expand Up @@ -83,7 +86,7 @@ export function ProjectTeacherComponent(props: {
const second_part_2 = (initialValues.value5 as Date).toDateString();
const second_part = _.isEqual(second_part_1, second_part_2);
const third_part = groupProject && Number.isNaN(max_students);
return !((first_part && second_part) || third_part);
return projectName !== "" && (props.is_new === true || !((first_part && second_part) || third_part));
}

const expandGroup = (checked: boolean) => {
Expand Down Expand Up @@ -148,9 +151,16 @@ export function ProjectTeacherComponent(props: {
document.body.removeChild(a);
}

const [width, setWidth] = useState<string>('100%');
useEffect(() => {
const scrollbarWidth = getScrollbarWidth();
setWidth(`calc(100vw - var(--sidebar-width) - ${scrollbarWidth}px)`);
console.log(scrollbarWidth)
}, []);

return (
<div className={"create-project"}>
<div className={"create-project-topbar"}>
<div className={"create-project-topbar"} style={{width}}>
<RegularButton placeholder={t('project.save')} add={false} onClick={() => {}}
disabled={!allowSaveButton()}
primary={allowSaveButton()}/> {/* TODO: implement save */}
Expand All @@ -172,7 +182,7 @@ export function ProjectTeacherComponent(props: {
<span>{t('download.download_all')}</span>
</button>
}
</div>
</div>
<div className={"create-project-content"}>
{/* PROJECT NAME FIELD */}
<div className={"field is-horizontal"}>
Expand Down Expand Up @@ -306,25 +316,26 @@ export function ProjectTeacherComponent(props: {
<div className="field-label">
<label className="label">{t('create_project.teamwork.tag')}</label>
</div>
<div className="field-body is-fullwidth is-align-content-center">
<label>
<input type="checkbox" onChange={e => expandGroup(e.target.checked)}
checked={groupProject}/>
</label>
<div className="field-body is-fullwidth is-align-content-center teamwork">

<Switch
type="checkbox"
onColor="#006edc"
checked={groupProject}
onChange={e => expandGroup(e)}
/>

{showGroup &&
<div>
<div className="field is-horizontal ml-6">
<label
className="label mr-3 is-align-content-center">{t('project.groupmembers.amount_of_members')}</label>
<input
style={{width: "30%"}}
className={"input is-rounded"}
type="number"
value={max_students}
onChange={e => setMaxStudents(parseInt(e.target.value))}
/>
</div>
<div className="field is-horizontal">
<label
className="mr-3 is-align-content-center">{t('project.groupmembers.amount_of_members')}</label>
<input
style={{width: "75px"}}
className={"input is-rounded"}
type="number"
value={max_students}
onChange={e => setMaxStudents(parseInt(e.target.value))}
/>
</div>
}
</div>
Expand Down
Loading

0 comments on commit ce08962

Please sign in to comment.