Merge branch 'style-changes' of https://github.com/helxplatform/eduhe…

…lx-jupyterlab-student-ext into is-published

eduhelx_jupyterlab_student/handlers.py

@@ -84,6 +84,16 @@ def write_error(self, status_code, **kwargs):
             self.set_status(status_code)
             self.finish(exc.response.text)
 
+    # Default error handling
+    def write_error(self, status_code, **kwargs):
+        # If exc_info is present, the error is unhandled.
+        if "exc_info" not in kwargs: return
+
+        cls, exc, traceback = kwargs["exc_info"]
+        if isinstance(exc, APIException):
+            self.set_status(status_code)
+            self.finish(exc.response.text)
+
 class WebsocketHandler(WSMixin, WSHandler, BaseHandler):
     clients = []
     queued_messages = []

src/components/assignment-panel/assignment-info/assignment-info.tsx

@@ -183,7 +183,24 @@ export const AssignmentInfo = ({  }: AssignmentInfoProps) => {
                     </div>
                 </div>
             ) }
+<<<<<<< HEAD
             <div className={ assignmentInfoSectionClass } style={{ marginTop: 0 }}>
+=======
+            { assignment.isCreated && assignment.isClosed && (
+                <div className={ assignmentInfoSectionClass }>
+                    <h5
+                        className={ `${ assignmentInfoSectionHeaderClass} ${ assignmentInfoSectionWarningClass }` }
+                    >
+                        Assignment is past due
+                    </h5>
+                    <div className={ assignmentInfoSectionWarningClass }>
+                        No further changes can be submitted.
+                        Please contact your {pluralize("instructor", course.instructors.length)} for an extension.
+                    </div>
+                </div>
+            ) }
+            <div className={ assignmentInfoSectionClass } style={{ marginTop: 0, marginBottom: 8 }}>
+>>>>>>> cae31e41c33fd24c27e904518df29b933801e477
                 <h5 className={ assignmentInfoSectionHeaderClass }>
                     Assignment Notebook
                 </h5>
@@ -193,7 +210,7 @@ export const AssignmentInfo = ({  }: AssignmentInfoProps) => {
                         <Input
                             readOnly
                             value={ assignment.studentNotebookPath }
-                            inputProps={{ style: { height: 32 } }}
+                            inputProps={{ style: { height: 32, fontSize: 15 } }}
                             style={{ width: "100%" }}
                         />
                         <FormHelperText style={{ color: "#1976d2" }}>

src/components/assignment-panel/assignment-staged-changes/assignment-staged-changes.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react'
 import { folderIcon, fileIcon } from '@jupyterlab/ui-components'
 import { assignmentStagedChangesClass, assignmentStagedChangesFolderIconClass, largeBulletClass, modifiedTypeBadgeClass, showMoreBtnClass, stagedChangeListItemClass, stagedChangesListClass } from './style'
 import { TextDivider } from '../../text-divider'
+import { InfoTooltip } from '../../info-tooltip'
 import { useAssignment } from '../../../contexts'
 import { IStagedChange } from '../../../api/staged-change'
 
@@ -89,6 +90,12 @@ export const AssignmentStagedChanges = ({ ...props }: AssignmentStagedChangesPro
             }}>
                 <h3 style={{ fontSize: 15, marginBottom: 12, fontWeight: 500 }}>
                     No Changes
+                    <InfoTooltip
+                        title="Files included in your .gitignore will not appear here."
+                        trigger="hover"
+                        placement="right"
+                        iconProps={{ style: { fontSize: 13, marginLeft: 6, color: "var(--jp-content-font-color2)" } }}
+                    />
                 </h3>
                 <p style={{ fontSize: 13, marginTop: 0 }}>
                     Files you've changed since your last submission will appear here.
@@ -101,9 +108,9 @@ export const AssignmentStagedChanges = ({ ...props }: AssignmentStagedChangesPro
             {/* <TextDivider innerStyle={{ fontSize: 'var(--jp-ui-font-size2)' }} style={{ marginBottom: 4 }}>Unsubmitted changes</TextDivider> */}
             <div className={ stagedChangesListClass }>
             {
-                stagedChangesSource.slice(0, showMore ? undefined : SHOW_MORE_CUTOFF).map((change) => (
+                stagedChangesSource.slice(0, showMore ? undefined : SHOW_MORE_CUTOFF).map((change, i) => (
                     <div className={ stagedChangeListItemClass }>
-                        <div style={{ display: "flex", alignItems: "center" }}>
+                        <div style={{ display: "flex", alignItems: "center", marginTop: i === 0 ? 4 : 0 }}>
                             { change.type === "directory" ? (
                                 <folderIcon.react
                                     className={ assignmentStagedChangesFolderIconClass }

src/components/assignment-panel/assignment-submit-form/assignment-submit-form.tsx

@@ -125,7 +125,7 @@ export const AssignmentSubmitForm = ({ }: AssignmentSubmitFormProps) => {
                     disabled: disabledStyle
                 }}
                 multiline
-                rows={ 5 }
+                rows={ 3 }
                 rowsMax={ 10 }
                 placeholder="Description (optional)"
                 title="Enter a description for the submission"

src/components/assignment-panel/style.ts

@@ -7,6 +7,7 @@ export const panelWrapperClass = (style as any)({
     color: 'var(--jp-ui-font-color1)',
     fontSize: 'var(--jp-ui-font-size1)',
     background: 'var(--jp-layout-color1) !important',
+    minWidth: 'var(--jp-sidebar-min-width)',
     '&, & *': { boxSizing: 'border-box' } 
 })
 

src/components/info-tooltip/index.ts

@@ -0,0 +1,2 @@
+export * from './info-tooltip'
+export * from './info-popover'

src/components/info-tooltip/info-icon.tsx

@@ -0,0 +1,23 @@
+import React, { useMemo, Ref } from 'react'
+import { InfoCircleFilled, InfoCircleOutlined } from '@ant-design/icons'
+import { AntdIconProps } from '@ant-design/icons/lib/components/AntdIcon'
+
+export interface InfoIconProps extends AntdIconProps {
+    filled?: boolean
+    ref?: Ref<HTMLSpanElement>
+}
+
+export const InfoIcon = ({ filled=true, style, ...other }: InfoIconProps) => {
+    const Icon = useMemo(() => filled ? InfoCircleFilled : InfoCircleOutlined, [filled])
+    return (
+        <Icon
+            className="info-circle"
+            style={{
+                fontSize: 16,
+                color: "rgb(85, 85, 85)",
+                ...style
+            }}
+            { ...other }
+        />
+    )
+}

src/components/info-tooltip/info-popover.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Popover, PopoverProps } from 'antd'
+import { InfoCircleFilled } from '@ant-design/icons'
+import { AntdIconProps } from '@ant-design/icons/lib/components/AntdIcon'
+import { ReactNode } from 'react'
+import { InfoIcon, InfoIconProps } from './info-icon'
+
+type InfoPopoverProps = PopoverProps & {
+    iconProps?: InfoIconProps
+}
+
+export const InfoPopover = ({
+    iconProps={},
+    ...tooltipProps
+}: InfoPopoverProps) => {
+    return (
+        <Popover
+            className="info-popover"
+            trigger="click"
+            {...tooltipProps }
+        >
+            <InfoIcon { ...iconProps } />
+        </Popover>
+    )
+}

src/components/info-tooltip/info-tooltip.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Tooltip, TooltipProps } from 'antd'
+import { InfoCircleFilled } from '@ant-design/icons'
+import { AntdIconProps } from '@ant-design/icons/lib/components/AntdIcon'
+import { ReactNode } from 'react'
+import { InfoIcon, InfoIconProps } from './info-icon'
+
+type InfoTooltipProps = TooltipProps & {
+    iconProps?: InfoIconProps
+}
+
+export const InfoTooltip = ({
+    iconProps={},
+    ...tooltipProps
+}: InfoTooltipProps) => {
+    return (
+        <Tooltip
+            className="info-tooltip"
+            trigger="click"
+            {...tooltipProps }
+        >
+            <InfoIcon { ...iconProps } />
+        </Tooltip>
+    )
+}

style/base.css

@@ -3,3 +3,6 @@
 
     https://jupyterlab.readthedocs.io/en/stable/developer/css.html
 */
+:root {
+    --jp-sidebar-min-width: 350px !important;
+}