Skip to content
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.

Sign up for GitHub

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

Notes Basic Frontend #960

Merged
merged 11 commits into from
Nov 15, 2024
Merged

Notes Basic Frontend #960

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
4cfb81b
initial attempt of sliding with rectangle
nidhi-mylavarapu Nov 7, 2024
d05304d
moved shifting Note to a separate component
nidhi-mylavarapu Nov 7, 2024
1d2e4a3
sliding notes with lighter color matching course
nidhi-mylavarapu Nov 7, 2024
ff34593
adde
nidhi-mylavarapu Nov 7, 2024
dd90cba
added arrow
nidhi-mylavarapu Nov 7, 2024
bec8497
using input but wrong styles
nidhi-mylavarapu Nov 7, 2024
6ed0d7c
note component setup
nidhi-mylavarapu Nov 7, 2024
d73a1fc
added note ic
nidhi-mylavarapu Nov 7, 2024
03dd540
notes icon in course card menu
nidhi-mylavarapu Nov 7, 2024
7f398e6
note shows up after clicking note option in course menu
nidhi-mylavarapu Nov 10, 2024
ba9c44d
lighter colors for notes
nidhi-mylavarapu Nov 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions src/assets/constants/colors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,50 +8,62 @@ export const coursesColorSet = [
{
text: 'Red',
hex: '#FF3B30',
lighterHex: '#FFCCCC',
},
{
text: 'Orange',
hex: '#FF9500',
lighterHex: '#FFE4BF',
},
{
text: 'Green',
hex: '#34C759',
lighterHex: '#D6F4DE',
},
{
text: 'Blue',
hex: '#007AFF',
lighterHex: '#C8ECFC',
},
{
text: 'Purple',
hex: '#AF52DE',
lighterHex: '#F8D4FC',
},
{
text: 'Pink',
hex: '#F296D3',
lighterHex: '#FDE6F3', // change
},
{
text: 'Big Red',
hex: '#AB1D1A',
lighterHex: '#F8D1CF', // change
},
{
text: 'Chimes',
hex: '#EAB168',
lighterHex: '#FFF3E4', // change
},
{
text: 'Gorges',
hex: '#318663',
lighterHex: '#CFE8E0', // change
},
{
text: 'Cayuga',
hex: '#0D49A9',
lighterHex: '#D0E1F7', // change
},
{
text: 'Ithaca Winter',
hex: '#88B9F2',
lighterHex: '#EAF2FD', // change
},
{
text: 'Blossom',
hex: '#D67B9B',
lighterHex: '#FCE8EE', // change
},
];

Expand Down
6 changes: 6 additions & 0 deletions src/assets/images/noteIconSmall.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/assets/images/notes/arrow.svg
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We might want to make a transparent version of this SVG that then gets filled with the color appropriate for that course note color, as otherwise would need a set of half-a-dozen-plus various arrow SVG icons for all the possible course colors.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
221 changes: 135 additions & 86 deletions src/components/Course/Course.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,96 +1,109 @@
<template>
<div
:class="{
'course--min': compact,
conflict: isCourseConflict(courseObj.uniqueID),
active: active,
}"
class="course"
>
<save-course-modal
:courseCode="courseCode"
@close-save-course-modal="closeSaveCourseModal"
@save-course="saveCourse"
@add-collection="addCollection"
v-if="isSaveCourseOpen"
/>
<edit-color
:editedColor="editedColor"
@color-course="colorCourse"
@color-subject="colorSubject"
@close-edit-color="closeEditColorModal"
v-if="isEditColorOpen"
/>
<div class="course-container">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know it was my suggestion to rearrange, but I would just be careful with the class names here post-reshuffling. It looks like the CSS logic for some of the z-indices gets in a kerfuffle on account of this change, causing the modal to be hidden under the next course card.

image

An easy fix would be to reduce the z-index from 1 to 0 for the course card. Can be a part of the scope of frontend fixes branched off this PR.

<div
class="course-color"
:style="cssVars"
:class="{
'course-color--active': active,
'course--min': compact,
conflict: isCourseConflict(courseObj.uniqueID),
active: active,
}"
class="course"
>
<img src="@/assets/images/dots/sixDots.svg" alt="" />
</div>
<div class="course-content" @click="courseOnClick()">
<div class="course-main">
<div class="course-top">
<div class="course-left">
<div
class="course-code"
data-cyId="courseCode"
:style="{
color: compact ? '#3d3d3d' : '#858585',
}"
>
{{ courseObj.code }}
<save-course-modal
:courseCode="courseCode"
@close-save-course-modal="closeSaveCourseModal"
@save-course="saveCourse"
@add-collection="addCollection"
v-if="isSaveCourseOpen"
/>
<edit-color
:editedColor="editedColor"
@color-course="colorCourse"
@color-subject="colorSubject"
@close-edit-color="closeEditColorModal"
v-if="isEditColorOpen"
/>
<div
class="course-color"
:style="cssVars"
:class="{
'course-color--active': active,
}"
>
<img src="@/assets/images/dots/sixDots.svg" alt="" />
</div>
<div class="course-content" @click="courseOnClick()">
<div class="course-main">
<div class="course-top">
<div class="course-left">
<div
class="course-code"
data-cyId="courseCode"
:style="{
color: compact ? '#3d3d3d' : '#858585',
}"
>
{{ courseObj.code }}
</div>
<course-caution
v-if="!isReqCourse && compact"
:course="courseObj"
:isCompactView="true"
/>
</div>
<button
v-if="!isReqCourse && isSemesterCourseCard"
class="course-dotRow"
@click="openMenu"
>
<img src="@/assets/images/dots/threeDots.svg" alt="open menu for course card" />
</button>
<button
v-else-if="!isReqCourse && !isSemesterCourseCard"
class="course-trash"
@click.stop="deleteCourseFromCollection"
@mouseover="hoverTrashIcon"
@mouseleave="unhoverTrashIcon"
>
<img :src="trashIcon" alt="delete course from collection" />
</button>
</div>
<div v-if="!compact" class="course-name">{{ courseObj.name }}</div>
<div v-if="!compact" class="course-info">
<span class="course-credits">{{ creditString }}</span>
<span v-if="semesterString" class="course-semesters">{{ semesterString }}</span>
<course-caution
v-if="!isReqCourse && compact"
v-if="!isReqCourse && !isSchedGenCourse"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just for reference could you explain what this change was motivated by? Doesn't look immediately relevant to the notes feature.

:course="courseObj"
:isCompactView="true"
:isCompactView="false"
/>
</div>
<button
v-if="!isReqCourse && isSemesterCourseCard"
class="course-dotRow"
@click="openMenu"
>
<img src="@/assets/images/dots/threeDots.svg" alt="open menu for course card" />
</button>
<button
v-else-if="!isReqCourse && !isSemesterCourseCard"
class="course-trash"
@click.stop="deleteCourseFromCollection"
@mouseover="hoverTrashIcon"
@mouseleave="unhoverTrashIcon"
>
<img :src="trashIcon" alt="delete course from collection" />
</button>
</div>
<div v-if="!compact" class="course-name">{{ courseObj.name }}</div>
<div v-if="!compact" class="course-info">
<span class="course-credits">{{ creditString }}</span>
<span v-if="semesterString" class="course-semesters">{{ semesterString }}</span>
<course-caution
v-if="!isReqCourse && !isSchedGenCourse"
:course="courseObj"
:isCompactView="false"
/>
</div>
</div>
<course-menu
v-if="menuOpen"
:courseObj="courseObj"
:semesterIndex="semesterIndex"
:isCompact="compact"
:courseColor="courseObj.color"
:courseCode="courseObj.code"
@open-note-modal="openNoteModal"
@open-edit-color-modal="openEditColorModal"
@delete-course="deleteCourscoe"
@edit-course-credit="editCourseCredit"
@open-save-course-modal="openSaveCourseModal"
:getCreditRange="getCreditRange || []"
v-click-outside="closeMenuIfOpen"
/>
</div>
<course-menu
v-if="menuOpen"
:courseObj="courseObj"
:semesterIndex="semesterIndex"
:isCompact="compact"
:courseColor="courseObj.color"
:courseCode="courseObj.code"
@open-edit-color-modal="openEditColorModal"
@delete-course="deleteCourse"
@edit-course-credit="editCourseCredit"
@open-save-course-modal="openSaveCourseModal"
:getCreditRange="getCreditRange || []"
v-click-outside="closeMenuIfOpen"
<Note
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wow great work figuring out all of this tricky CSS stuff!

v-if="isNoteVisible"
class="note"
:initialTranslateY="'-67px'"
:expandedTranslateY="'-35px'"
:width="'calc(102.8% - 10px)'"
:color="cssVars['--bg-color']"
:expand="expandNote"
@toggle="handleToggleNote"
/>
</div>
</template>
Expand All @@ -110,9 +123,11 @@ import { clickOutside } from '@/utilities';
import EditColor from '../Modals/EditColor.vue';
import trashGrayIcon from '@/assets/images/trash-gray.svg';
import trashRedIcon from '@/assets/images/trash.svg';
import Note from '../Notes/Note.vue';

export default defineComponent({
components: { CourseCaution, CourseMenu, EditColor, SaveCourseModal },
name: 'Course',
components: { CourseCaution, CourseMenu, EditColor, SaveCourseModal, Note },
props: {
courseObj: { type: Object as PropType<FirestoreSemesterCourse>, required: true },
compact: { type: Boolean, required: true },
Expand Down Expand Up @@ -156,6 +171,9 @@ export default defineComponent({
deletingCourse: false,
trashIcon: trashGrayIcon, // Default icon
courseCode: '',
isExpanded: false,
isNoteVisible: false,
expandNote: false,
};
},
computed: {
Expand Down Expand Up @@ -252,6 +270,17 @@ export default defineComponent({
unhoverTrashIcon() {
this.trashIcon = trashGrayIcon;
},
handleToggleNote() {
this.expandNote = !this.expandNote;
},
openNoteModal() {
this.isNoteVisible = true;
this.menuOpen = false;
this.expandNote = true;
},
closeNote() {
this.isNoteVisible = false;
},
},
directives: {
'click-outside': clickOutside,
Expand All @@ -262,27 +291,31 @@ export default defineComponent({
<style scoped lang="scss">
@import '@/assets/scss/_variables.scss';

.course-container {
position: relative;
padding-bottom: 20px;
}

.course {
box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.055);
position: relative;
z-index: 1;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the z-index I was referencing previously — seems to mess with the course menu dropdown precedence.

box-sizing: border-box;
border-radius: 0.5rem;
display: flex;
flex-direction: row;
background-color: $white;
box-shadow: 0px 0px 10px 4px $boxShadowGray;
position: relative;
height: 5.625rem;
touch-action: none;
cursor: grab;

&:hover {
background: rgba(255, 255, 255, 0.15);
background: $white;
}

&:active:hover {
touch-action: none;
cursor: grabbing;
}

&--min {
height: 2.125rem;

Expand Down Expand Up @@ -407,4 +440,20 @@ export default defineComponent({
.active {
border: 1px solid $yuxuanBlue;
}
.rectangle {
position: absolute;
left: 50%;
transform: translateX(-50%) translateY(-65px);
width: calc(106% - #{$colored-grabber-width});
height: 80px;
background-color: #a8e6cf;
border-radius: 12.49px;
cursor: pointer;
z-index: 0;
transition: transform 0.3s ease;
}

.rectangle.expanded {
transform: translateX(-50%) translateY(0px);
}
</style>
13 changes: 13 additions & 0 deletions src/components/Modals/CourseMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,16 @@
<template>
<div class="courseMenu">
<div class="courseMenu-content">
<div class="courseMenu-section" @click="openNoteModal(courseObj.code)">
<div class="courseMenu-left">
<img
class="courseMenu-icon"
src="@/assets/images/noteIconSmall.svg"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know we might change the image, but I believe the icon is a bit bigger than the other icons so it looks unaligned

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes that is the case, we'd have to rearrange all the icons sidebar style to be centered not right-aligned and have a grid or dynamic offset calculation otherwise — I'd just find a new icon honestly.

alt="note course icon"
/>
<span class="courseMenu-text">Note</span>
</div>
</div>
<div
class="courseMenu-section"
v-if="saveCourseIconVisible"
Expand Down Expand Up @@ -250,6 +260,9 @@
}
return creditArray;
},
openNoteModal(courseCode: string) {

Check failure on line 263 in src/components/Modals/CourseMenu.vue

View workflow job for this annotation

GitHub Actions / check 

'courseCode' is defined but never used

Check failure on line 263 in src/components/Modals/CourseMenu.vue

View workflow job for this annotation

GitHub Actions / check 

'courseCode' is defined but never used
this.$emit('open-note-modal');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NB: checks not relevant as this will be used in later PRs.

},
},
});
</script>
Expand Down
Loading
Loading