fix #68

webui/src/components/base/editable-headline.vue

@@ -1,9 +1,5 @@
 <template>
   <h2>
-    <img alt="delete" class="delete"
-         src="@/assets/icons/x-circle.svg"
-         @click="$emit('remove', $event)">
-
     <template v-if="!edit">
       {{ value }}
 
@@ -12,13 +8,14 @@
            @click="edit = true">
     </template>
     <template v-else>
-      <text-input placeholder="name" v-model="input"
-                  @change="change" @enter="change"/>
+      <input-group>
+        <text-input placeholder="name" v-model="input"
+                    @change="change" @enter="change"/>
 
-      <button-row>
         <button-input @click="change" type="primary">confirm</button-input>
         <button-input @click="edit = false">cancel</button-input>
-      </button-row>
+        <button-input @click="remove" type="error">delete</button-input>
+      </input-group>
     </template>
   </h2>
 </template>
@@ -26,11 +23,11 @@
 <script>
 import TextInput from "@/components/base/text-input";
 import ButtonInput from "@/components/base/button-input";
-import ButtonRow from "@/components/base/button-row";
+import InputGroup from "@/components/base/input-group";
 
 export default {
   name: "editable-headline",
-  components: {ButtonRow, ButtonInput, TextInput},
+  components: {InputGroup, ButtonInput, TextInput},
   props: ['value'],
   data: function () {
     return {
@@ -42,6 +39,9 @@ export default {
     change: function () {
       this.$emit('change', this.input);
       this.edit = false;
+    },
+    remove: function (event) {
+      this.$emit('remove', event);
     }
   }
 }
@@ -69,6 +69,5 @@ img {
 
 .text-input {
   flex-grow: 1;
-  margin-top: -0.5rem;
 }
 </style>

webui/src/components/base/input-group.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="input-group">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "input-group"
+}
+</script>
+
+<style scoped>
+.input-group {
+  display: flex;
+  flex-direction: row-reverse;
+  width: 100%;
+}
+
+.input-group >>> :first-child {
+  display: flex;
+  flex-grow: 1;
+}
+
+.input-group >>> .button-input {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.input-group >>> .button-input:not(:last-child) {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+</style>

webui/src/components/base/select-input.vue

@@ -26,6 +26,5 @@ export default {
 
 select {
   width: 100%;
-  margin-top: 0.2rem;
 }
 </style>

webui/src/components/base/text-input.vue

@@ -30,7 +30,7 @@ export default {
       this.$emit('change', event.target.value);
     },
     keypress: function (event) {
-      if (event.keyCode === 13 && event.keyCode === 10)
+      if (event.keyCode === 13 || event.keyCode === 10)
         this.$emit('enter', event.target.value)
 
       this.clear();
@@ -46,7 +46,6 @@ export default {
 
 input {
   width: 100%;
-  margin-top: 0.2rem;
 }
 
 input.error {

webui/src/components/base/textarea-input.vue

@@ -31,7 +31,6 @@ export default {
 textarea {
   width: 100%;
   resize: none;
-  margin-top: 0.2rem;
 }
 
 textarea.error {

webui/src/components/projects/project-labels-window.vue

@@ -18,10 +18,14 @@
     </div>
 
     <div class="label">
-      <text-input placeholder="New Label"
-                  v-model="createLabelValue"
-                  @change="createLabel"
-                  @enter="createLabel"/>
+      <input-group>
+        <text-input placeholder="New Label"
+                    v-model="createLabelValue"
+                    @enter="createLabel"/>
+        <button-input type="primary" @click="createLabel">
+          create
+        </button-input>
+      </input-group>
     </div>
   </div>
 </template>
@@ -30,10 +34,12 @@
 import TextInput from "@/components/base/text-input";
 import MediaSelector from "@/components/media/media-selector";
 import EditableHeadline from "@/components/base/editable-headline";
+import ButtonInput from "@/components/base/button-input";
+import InputGroup from "@/components/base/input-group";
 
 export default {
   name: "project-labels-window",
-  components: {EditableHeadline, MediaSelector, TextInput},
+  components: {InputGroup, ButtonInput, EditableHeadline, MediaSelector, TextInput},
   props: ['currentProject', 'socket'],
   data: function () {
     return {
@@ -66,11 +72,11 @@ export default {
     }
   },
   methods: {
-    createLabel: function (value) {
+    createLabel: function () {
       if (!this.createLabelValue)
         return;
 
-      this.socket.post('/projects/' + this.currentProject.id + '/labels', {name: value});
+      this.socket.post('/projects/' + this.currentProject.id + '/labels', {name: this.createLabelValue});
       this.createLabelValue = '';
     },
     editLabel: function (id, value) {

webui/src/components/projects/project-settings-window.vue

@@ -115,6 +115,7 @@ h1 {
 
 .content > div.text {
   margin-bottom: 0.2rem;
+  font-size: 80%;
 }
 
 /deep/ .content textarea {