Skip to content

Commit

Permalink
Default to course color for custom subjects
Browse files Browse the repository at this point in the history 
Change the default from a gray color to the color corresponding to the
course number of a subject.
  • Loading branch information
@psvenk
psvenk committed Dec 3, 2023
1 parent 5c829ce commit 648b38d
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 48 deletions.
84 changes: 42 additions & 42 deletions src/assets/css/coursecolors.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,49 +2,49 @@
https://github.com/venkatesh-sivaraman/fireroad-server/blob/develop/requirements/static/requirements/css/req_preview.css
*/

.course-none { background-color: #999; }
.course-none { background-color: #999 !important; }

.course-1 { background-color: #DE4343; }
.course-2 { background-color: #DE7643; }
.course-3 { background-color: #4369DE; }
.course-4 { background-color: #57B563; }
.course-5 { background-color: #43DEAF; }
.course-6 { background-color: #4390DE; }
.course-7 { background-color: #5779B5; }
.course-8 { background-color: #8157B5; }
.course-9 { background-color: #8143DE; }
.course-10 { background-color: #B55757; }
.course-11 { background-color: #B55773; }
.course-12 { background-color: #43DE4F; }
.course-14 { background-color: #DE9043; }
.course-15 { background-color: #B55C57; }
.course-16 { background-color: #43B2DE; }
.course-17 { background-color: #DE43B7; }
.course-18 { background-color: #575DB5; }
.course-20 { background-color: #57B56E; }
.course-21 { background-color: #57B567; }
.course-21A { background-color: #57B573; }
.course-21W { background-color: #57B580; }
.course-CMS { background-color: #57B58C; }
.course-21G { background-color: #57B599; }
.course-21H { background-color: #57B5A5; }
.course-21L { background-color: #57B5B2; }
.course-21M { background-color: #57ACB5; }
.course-WGS { background-color: #579FB5; }
.course-22 { background-color: #B55757; }
.course-24 { background-color: #7657B5; }
.course-CC { background-color: #4FDE43; }
.course-CSB { background-color: #579AB5; }
.course-EC { background-color: #76B557; }
.course-EM { background-color: #576EB5; }
.course-ES { background-color: #5A57B5; }
.course-HST { background-color: #5779B5; }
.course-IDS { background-color: #57B586; }
.course-MAS { background-color: #57B55A; }
.course-SCM { background-color: #57B573; }
.course-STS { background-color: #8F57B5; }
.course-SWE { background-color: #B56B57; }
.course-SP { background-color: #4343DE; }
.course-1 { background-color: #DE4343 !important; }
.course-2 { background-color: #DE7643 !important; }
.course-3 { background-color: #4369DE !important; }
.course-4 { background-color: #57B563 !important; }
.course-5 { background-color: #43DEAF !important; }
.course-6 { background-color: #4390DE !important; }
.course-7 { background-color: #5779B5 !important; }
.course-8 { background-color: #8157B5 !important; }
.course-9 { background-color: #8143DE !important; }
.course-10 { background-color: #B55757 !important; }
.course-11 { background-color: #B55773 !important; }
.course-12 { background-color: #43DE4F !important; }
.course-14 { background-color: #DE9043 !important; }
.course-15 { background-color: #B55C57 !important; }
.course-16 { background-color: #43B2DE !important; }
.course-17 { background-color: #DE43B7 !important; }
.course-18 { background-color: #575DB5 !important; }
.course-20 { background-color: #57B56E !important; }
.course-21 { background-color: #57B567 !important; }
.course-21A { background-color: #57B573 !important; }
.course-21W { background-color: #57B580 !important; }
.course-CMS { background-color: #57B58C !important; }
.course-21G { background-color: #57B599 !important; }
.course-21H { background-color: #57B5A5 !important; }
.course-21L { background-color: #57B5B2 !important; }
.course-21M { background-color: #57ACB5 !important; }
.course-WGS { background-color: #579FB5 !important; }
.course-22 { background-color: #B55757 !important; }
.course-24 { background-color: #7657B5 !important; }
.course-CC { background-color: #4FDE43 !important; }
.course-CSB { background-color: #579AB5 !important; }
.course-EC { background-color: #76B557 !important; }
.course-EM { background-color: #576EB5 !important; }
.course-ES { background-color: #5A57B5 !important; }
.course-HST { background-color: #5779B5 !important; }
.course-IDS { background-color: #57B586 !important; }
.course-MAS { background-color: #57B55A !important; }
.course-SCM { background-color: #57B573 !important; }
.course-STS { background-color: #8F57B5 !important; }
.course-SWE { background-color: #B56B57 !important; }
.course-SP { background-color: #4343DE !important; }

.generic-GIR { background-color: #BF6139; }
.generic-HASS { background-color: #39BF97; }
Expand Down
22 changes: 17 additions & 5 deletions src/components/CustomClass.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,13 @@
<h3>Color</h3>
</v-card-text>
<center>
<v-btn-toggle ref="colors" v-model="form.values.colorChosen" class="elevation-0">
<v-btn-toggle v-model="form.values.colorChosen" mandatory class="elevation-0">
<v-layout row wrap>
<v-flex class="xs12">
<v-btn :class="`white--text px-4 ma-2 ${courseColorFromId(form.values.shortTitle)}`" value="default">
Default
</v-btn>
</v-flex>
<v-flex v-for="(_i, i) in 7" :key="i">
<v-btn v-for="(_j, j) in 6" :key="j" :class="`px-4 ma-2 custom_color-${6*i + j}`" :value="`@${6*i + j}`">
<font-awesome-icon icon="check" />
Expand All @@ -61,8 +66,11 @@
</template>

<script>
import colorMixin from './../mixins/colorMixin.js';
export default {
name: 'CustomClass',
mixins: [colorMixin],
data: function () {
return {
dialog: false,
Expand All @@ -73,7 +81,7 @@ export default {
units: undefined,
inClassHours: undefined,
outOfClassHours: undefined,
colorChosen: undefined
colorChosen: 'default'
},
rules: {
shortTitleRule: [
Expand Down Expand Up @@ -106,7 +114,7 @@ export default {
this.form.values.units = classEditing.units;
this.form.values.inClassHours = classEditing.in_class_hours;
this.form.values.outOfClassHours = classEditing.out_of_class_hours;
this.form.values.colorChosen = classEditing.custom_color;
this.form.values.colorChosen = classEditing.custom_color || 'default';
this.dialog = true;
},
dialog (newDialog, oldDialog) {
Expand All @@ -117,13 +125,17 @@ export default {
},
methods: {
addCustomClass: function () {
let color = this.form.values.colorChosen;
if (color == 'default') {
color = undefined;
}
const newClass = {
subject_id: this.form.values.shortTitle,
title: this.form.values.fullTitle,
total_units: Number(this.form.values.units) || 0,
in_class_hours: Number(this.form.values.inClassHours) || 0,
out_of_class_hours: Number(this.form.values.outOfClassHours) || 0,
custom_color: this.form.values.colorChosen || '@40',
custom_color: color,
public: false,
offered_fall: true,
offered_IAP: true,
Expand All @@ -140,7 +152,7 @@ export default {
openNewClass: function () {
// Open the dialog for adding a new class
this.$refs.form.reset();
this.form.values.colorChosen = undefined;
this.form.values.colorChosen = 'default';
this.dialog = true;
},
validate: function () {
Expand Down
5 changes: 4 additions & 1 deletion src/mixins/colorMixin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,10 @@ export default {
return 'custom_color-' + subject.custom_color.slice(1);
}
// Otherwise it's normal class which id determines color
const id = subject.id || subject.subject_id;
return this.courseColorFromId(subject.id || subject.subject_id);
},
// Takes a subject ID directly
courseColorFromId: function (id) {
if (id !== undefined) {
let course = id.split('.')[0];
if (course.indexOf('GIR:') >= 0) {
Expand Down

0 comments on commit 648b38d

Please sign in to comment.