Ideendokument

Ideen.md

@@ -6,7 +6,12 @@
 - Option "Nur Groß-/Kleinbuchstaben" (standard nur groß)
 - Option "Leerzeichen ignorieren" (standard ja)
 - Option "custom Zuordnung Buchstaben" (standard leer)
+- Türchen sichtbar machen (besser für touch, standard nein)
 
-# Fixed
+# Aufgaben
 
-- Lösungsbuchstaben weniger als türchen erzeugt bug
+- Rework PreviewDoor für RectangleCanvas
+
+# Erledigt
+
+- Lösungsbuchstaben weniger als türchen erzeugt bug

ui/src/components/calendar/CalendarDoor.vue

@@ -1,5 +1,5 @@
 <template>
-  <SVGRect :rectangle="door.position" :focused="false" @click.left="on_click" />
+  <SVGRect :rectangle="door.position" @click.left="on_click" />
 </template>
 
 <script lang="ts">

ui/src/components/calendar/SVGRect.vue

@@ -1,6 +1,6 @@
 <template>
   <rect
-    :class="focused ? 'focus' : ''"
+    :class="color !== undefined ? `visible ${color}` : ''"
     :x="rectangle.left"
     :y="rectangle.top"
     :width="rectangle.width"
@@ -12,32 +12,42 @@
 import { Rectangle } from "@/lib/rectangle";
 import { Options, Vue } from "vue-class-component";
 
+// type RectClass = "red" | "yellow" | "green" | "blue" | "purple";
+type RectColor = "yellow" | "green";
+
 @Options({
   props: {
-    focused: {
+    color: {
-      type: Boolean,
+      type: String,
-      default: false,
+      required: false,
     },
     rectangle: Rectangle,
   },
 })
 export default class extends Vue {
-  public focused!: boolean;
+  public color?: RectColor;
   public rectangle!: Rectangle;
 }
 </script>
 
 <style lang="scss" scoped>
 rect {
-  fill: lightgreen;
+  fill: transparent;
-  stroke: green;
-  fill-opacity: 0.2;
-  stroke-opacity: 0.9;
-  stroke-width: 1;
 
-  &.focus {
+  &.visible {
-    fill: gold;
+    fill-opacity: 0.2;
-    stroke: yellow;
+    stroke-opacity: 0.9;
+    stroke-width: 1;
+
+    &.yellow {
+      fill: gold;
+      stroke: yellow;
+    }
+
+    &.green {
+      fill: lightgreen;
+      stroke: green;
+    }
   }
 }
 </style>

ui/src/components/editor/PreviewDoor.vue

@@ -1,5 +1,5 @@
 <template>
-  <SVGRect :rectangle="door.position" :focused="editing" />
+  <SVGRect :rectangle="door.position" :color="editing ? 'yellow' : 'green'" />
   <foreignObject
     :x="Math.round(parent_aspect_ratio * door.position.left)"
     :y="door.position.top"
@@ -9,7 +9,7 @@
   >
     <div
       xmlns="http://www.w3.org/1999/xhtml"
-      class="is-flex is-align-items-center is-justify-content-center"
+      class="px-4 is-flex is-align-items-center is-justify-content-center"
       @click.left="on_click"
     >
       <input
@@ -22,8 +22,8 @@
         placeholder="Tag"
         @keydown="on_keydown"
       />
-      <div v-else-if="door.day > 0" class="is-size-1 has-text-weight-bold">
+      <div v-else class="is-size-1 has-text-weight-bold has-text-danger">
-        {{ door.day }}
+        {{ door.day > 0 ? door.day : "*" }}
       </div>
     </div>
   </foreignObject>
@@ -139,7 +139,6 @@ foreignObject {
   cursor: pointer;
 
   > div {
-    color: red;
     height: inherit;
   }
 }

ui/src/components/editor/RectangleCanvas.vue

@@ -10,10 +10,11 @@
   >
     <SVGRect
       v-for="(rect, index) in rectangles"
+      color="green"
       :key="`rect-${index}`"
       :rectangle="rect"
     />
-    <SVGRect v-if="preview_visible" :focused="true" :rectangle="preview_rect" />
+    <SVGRect v-if="preview_visible" color="yellow" :rectangle="preview_rect" />
   </ThouCanvas>
 </template>