Added colors (without offset for calendar)

Author: almerk

client/event.components.json

@@ -1,18 +1,42 @@
 {
  "default": {
- "accentColor": { "h":0, "s":0, "l": 50 },
- "index": { "path": "./default/index.vue"},
- "create":{ "path": "./default/create.vue"},
- "update":{ "path": "./default/update.vue"}, 
- "delete":{ "path": "./default/delete.vue"}
+ "accentColor": {
+ "h": 0,
+ "s": 0,
+ "l": 0
+ },
+ "index": {
+ "path": "./default/index.vue"
+ },
+ "create": {
+ "path": "./default/create.vue"
+ },
+ "update": {
+ "path": "./default/update.vue"
+ },
+ "delete": {
+ "path": "./default/delete.vue"
+ }
  },
  "notification": {
- "accentColor": { "h":25, "s":50, "l": 50 }
+ "accentColor": {
+ "h": 227,
+ "s": 50,
+ "l": 30
+ }
  },
  "anniversary": {
- "accentColor": { "h":50, "s":50, "l": 50 }
+ "accentColor": {
+ "h": 128,
+ "s": 50,
+ "l": 30
+ }
  },
  "task": {
- "accentColor": { "h":75, "s":50, "l": 50 }
+ "accentColor": {
+ "h": 0,
+ "s": 73,
+ "l": 30
+ }
  }
 }

client/src/components/Main.vue

@@ -6,7 +6,7 @@
  <legend @click="showOrHideAllTypes()">Types</legend>
  <ul>
  <li v-for="type in types" :key="type.id">
- <label>
+ <label :style="styleObj(type.name)" class="type">
  <input
  type="checkbox"
  :value="type.id"
@@ -21,8 +21,12 @@
  <fieldset>
  <legend @click="showOrHideAllCalendars()">Calendars</legend>
  <ul>
- <li v-for="calendar in calendars" :key="calendar.id">
- <label>
+ <li
+ v-for="calendar in calendars"
+ :key="calendar.id"
+ :style="styleObj(getType(calendar.typeId).name)"
+ >
+ <label class="calendar">
  <input
  type="checkbox"
  :value="calendar.id"
@@ -49,6 +53,7 @@ import toolbar from "../components/toolbar.vue";
 import feed from "../components/feed.vue";
 import badge from "../components/ui/badge";
 import Badge from "./ui/badge.vue";
+import events from "../components/events/fabric.js";
 
 export default {
  components: {
@@ -100,6 +105,20 @@ export default {
  isDisplayed: this.selectedCalendarIds.includes(ev.calendarId),
  };
  },
+ color(typeName) {
+ return events.typeColorHSL(typeName.toLowerCase(), 0);
+ },
+ styleObj(typeName) {
+ const color = this.color(typeName);
+ return {
+ "--color-h": color.h,
+ "--color-s": color.s + "%",
+ "--color-l": color.l + "%",
+ };
+ },
+ getType(id) {
+ return this.types.find((x) => x.id == id);
+ },
  },
  created() {
  this.$store.commit("initialize");
@@ -162,4 +181,14 @@ export default {
  overflow: auto;
  height: 100%;
 }
+#main label.type,#main label.calendar {
+ --hsl: var(--color-h), var(--color-s), var(--color-l);
+}
+#main label.type span, #main label.calendar span {
+ text-shadow: hsla(var(--hsl), 0.4) 0px 0px 1px,
+ hsla(var(--hsl), 0.4) 0px 0px 1px;
+}
+#main label.type sup, #main label.calendar sup {
+ color: hsl(var(--hsl));
+}
 </style> 

client/src/components/calendar.event.vue

@@ -1,5 +1,11 @@
 <template>
- <component :is="view" :event="event" @click.native="eventClick(event.id)" :id="`event-${event.id}`"></component>
+ <component
+ :is="view"
+ :event="event"
+ @click.native="eventClick(event.id)"
+ :id="`event-${event.id}`"
+ :style="styleObj"
+ ></component>
 </template>
 
 <script>
@@ -15,18 +21,28 @@ export default {
  },
  data() {
  return {
-  currentView: 'index'
+ currentView: "index",
  };
  },
  computed: {
- view() {
- return events.is(this.event.$type, this.currentView);
- }
+ view() {
+ return events.is(this.event.$type, this.currentView);
+ },
+ color() {
+ return events.typeColorHSL(this.event.$type, 0);
+ },
+ styleObj() {
+ return {
+ "--color-h": this.color.h,
+ "--color-s": this.color.s+'%',
+ "--color-l": this.color.l+'%'
+ };
+ },
  },
  methods: {
  eventClick(id) {
-  const path = `/events/${id}`;
-  if (this.$route.path !== path) this.$router.push(path)
+ const path = `/events/${id}`;
+ if (this.$route.path !== path) this.$router.push(path);
  },
  },
 };

client/src/components/events/default/index.vue

@@ -6,7 +6,6 @@
  <span>{{ event.name }}</span>
  </fieldset>
  </header>
-
  <main>
  <slot name="content"></slot>
  <fieldset>
@@ -90,12 +89,11 @@ export default {
 
 <style>
 .event-content {
+ --hsl: var(--color-h), var(--color-s), var(--color-l);
  width: 100%;
  height: 100%;
- --s: auto;
- --c: 0, 0, 0;
  overflow: hidden;
- border: 3px solid rgb(var(--c));
+ border: 2px solid hsl(var(--hsl));
  margin: 2px;
  position: relative;
  display: flex;
@@ -105,7 +103,7 @@ export default {
 .event-content:not(.selected) aside {
  display: none;
 }
-.event-content:not(.selected) > *:not(header){
+.event-content:not(.selected) > *:not(header) {
  display: none;
 }
 .event-content:not(.selected) header {
@@ -124,7 +122,7 @@ export default {
  flex-direction: column;
  margin: 0.4em 0;
 }
-.event-content > header{
+.event-content > header {
  position: sticky;
  top: 0;
  background: rgb(255, 255, 255, 0.7);
@@ -149,9 +147,12 @@ export default {
 .event-content:not(.selected) legend {
  display: none;
 }
+.event-content:not(.selected):hover{
+ box-shadow: hsla(var(--hsl), 0.7) 1px 1px 2px 1px, hsla(var(--hsl), 0.7) -1px -1px 2px 1px
+}
 .event-content.selected {
- box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
- rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
+ box-shadow: hsla(var(--hsl), 0.6) 3px 3px 4px 2px,
+ hsla(var(--hsl), 0.56) -3px -3px 4px 2px;
 }
 .event-content textarea {
  outline: none;

client/src/components/events/fabric.js

@@ -3,11 +3,23 @@ const KEY_FORMAT = (pref, current) => `${pref}-${current}`
 module.exports = {
  all: getAllFromGlobal(),//should be appended to vue components section
  is(calendarType, viewType) {//dynamic component name retrieving in v-bind:is attr
- const type = calendarType.replace("Event",'');
+ const type = calendarType.replace("Event", '');
  if (components[type]) return KEY_FORMAT(type, viewType);
  console.error(`Undefined event component type: ${type}`);
  return KEY_FORMAT("default", viewType);
- }
+ },
+ typeColorHSL(calendarType, offset) {
+ const type = calendarType.replace("Event", '');
+ if (components[type]) {
+ const color = components[type].accentColor
+ return {
+ ...color,
+ h: color.h + (offset || 0)
+ };
+ }
+ console.error(`Undefined event component type: ${type}`);
+ return components.default.accentColor
+ },
 }
 
 //TODO: Retrieving component by url