@konfuzio/document-validation-ui 0.1.10-dev.7 → 0.1.10-dev.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.10-dev.7",
+  "version": "0.1.10-dev.9",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
   "main": "dist/app.js",
   "scripts": {

package/src/api.js

@@ -21,6 +21,14 @@ const setAuthToken = (token) => {
   authToken = token;
 };
 
+const setApiUrl = (url) => {
+  HTTP.defaults.baseURL = url;
+};
+
+const setImageUrl = (url) => {
+  IMG_REQUEST.defaults.baseURL = url;
+};
+
 const getInterceptorConfig = (config) => {
   if (authToken) {
     config.headers["Authorization"] = `Token ${authToken}`;
@@ -54,6 +62,8 @@ const makeImageRequest = (imageURL) => {
 
 export default {
   HTTP,
+  setApiUrl,
+  setImageUrl,
   makeImageRequest,
   setAuthToken,
 };

package/src/assets/scss/document_category.scss

@@ -2,6 +2,7 @@
 
 .category-chooser {
   cursor: pointer;
+  height: 100%;
 
   &.split-mode {
     border: 1px solid $grey-outline;

package/src/assets/scss/new_annotation.scss

@@ -12,6 +12,7 @@
   z-index: 40;
   color: $white;
   padding: 8px;
+  cursor: default;
 
   .popup-input {
     background-color: $text-color;
@@ -59,9 +60,15 @@
     left: 0;
   }
 
-  .annotation-dropdowns {
-    display: flex;
-    flex-direction: column;
+  .annotation-dropdown {
+    border-radius: 12px;
+    border: 1px solid $grey-low-opacity !important;
+
+    .button.is-text {
+      box-shadow: none !important;
+      color: $white !important;
+      background-color: transparent !important;
+    }
   }
 
   .annotation-buttons {
@@ -70,6 +77,10 @@
     flex-direction: row;
     gap: 2px;
 
+    .button.is-text {
+      color: $white !important;
+    }
+
     .cancel-button {
       color: $white;
 

package/src/assets/scss/{main.scss → theme.scss}

@@ -1,9 +1,21 @@
+@use "sass:meta";
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
 @import "./imports.scss";
 
-body {
+:root {
+  --konfuzio-green: #41af85;
+  --white: #fff;
+  --primary-color: var(--konfuzio-green);
+  --primary-button: 4px;
+  --top-bar-background: var(--white);
+}
+
+.dv-ui-app-container {
+  @include meta.load-css("../../../node_modules/buefy/dist/buefy.css");
+  display: flex;
+  height: 100%;
+  flex-direction: column;
   margin: 0;
-  font-family: $font-family;
 
   .overlay {
     height: 100%;
@@ -16,13 +28,16 @@ body {
     overflow-x: hidden;
   }
 
-  .dv-ui-app-container {
-    display: flex;
-    height: 100%;
-    flex-direction: column;
-  }
+  &.dv-ui-theme {
+    font-family: $font-family;
 
-  .dv-ui-theme {
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    -webkit-text-size-adjust: 100%;
+    -moz-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+    box-sizing: border-box;
     button {
       &.is-primary {
         background-color: $primary !important;
@@ -37,6 +52,7 @@ body {
         }
       }
 
+      // TODO: custom classes should have the styles under the component file
       &.missing-decline-btn {
         font-size: 14px;
         color: $grey-blue !important;
@@ -56,11 +72,6 @@ body {
         }
       }
 
-      &:not(.is-text, .is-primary, .missing-btn) {
-        background-color: $white;
-        color: $text-color;
-      }
-
       &.is-text {
         text-decoration: none;
 
@@ -220,8 +231,6 @@ body {
     }
 
     .dropdown {
-      height: 100%;
-
       &.no-padding-bottom {
         .dropdown-content {
           padding-bottom: 0;
@@ -246,6 +255,7 @@ body {
       .dropdown-menu {
         padding-top: 0px;
         min-width: 40px;
+        width: 100%;
       }
 
       a.dropdown-item {
@@ -564,7 +574,6 @@ body {
 
       &.bottom-aligned {
         width: 100%;
-        bottom: 10px;
 
         .tooltip-content {
           &::before {

package/src/assets/scss/variables.scss

@@ -1,6 +1,5 @@
 /* Theme */
 
-$konfuzio-green: #41af85;
 $green: #4bb543;
 $green-low-opacity: rgba(75, 181, 67, 0.11);
 $green-border: #67d19f;
@@ -43,12 +42,6 @@ $purple: #7b61ff;
 $purple-low-opacity: rgba(123, 97, 255, 0.08);
 $text-color: #1a1a1a;
 
-:root {
-  --primary-color: #{$konfuzio-green};
-  --primary-button: 4px;
-  --top-bar-background: #{$white};
-}
-
 $primary: var(--primary-color);
 $hover-style: brightness(0.8) contrast(160%) grayscale(0.4);
 $font-family: "Inter", sans-serif;

package/src/components/App.vue

@@ -5,9 +5,12 @@
   </div>
 </template>
 <script>
+import Vue from "vue";
+import * as Sentry from "@sentry/vue";
 import DocumentDashboard from "./DocumentDashboard";
 import { DocumentsList } from "./DocumentsList";
 import { getURLQueryParam, getURLPath } from "../utils/utils";
+import { Integrations } from "@sentry/tracing";
 import API from "../api";
 
 export default {
@@ -39,6 +42,30 @@ export default {
       required: false,
       default: "false",
     },
+    // eslint-disable-next-line vue/prop-name-casing
+    sentry_dsn: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    // eslint-disable-next-line vue/prop-name-casing
+    sentry_env: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    // eslint-disable-next-line vue/prop-name-casing
+    api_url: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    // eslint-disable-next-line vue/prop-name-casing
+    image_url: {
+      type: String,
+      required: false,
+      default: "",
+    },
     locale: {
       type: String,
       required: false,
@@ -93,13 +120,40 @@ export default {
     },
   },
   created() {
+    // Sentry config
+    if (process.env.NODE_ENV != "development") {
+      Sentry.init({
+        Vue,
+        dsn: process.env.VUE_APP_SENTRY_DSN,
+        integrations: [new Integrations.BrowserTracing()],
+        environment: process.env.VUE_APP_SENTRY_ENVIRONMENT,
+
+        // We recommend adjusting this value in production, or using tracesSampler
+        // for finer control
+        tracesSampleRate: 1.0,
+
+        // If false, errors won't show up in devtools
+        logErrors: true,
+
+        tracingOptions: {
+          trackComponents: true,
+        },
+      });
+    }
+
     // locale config
     if (this.locale && this.locale !== "") {
       this.$i18n.locale = this.locale;
     }
 
-    // user token config
+    // api config
     API.setAuthToken(this.userToken);
+    if (this.api_url !== "") {
+      API.setApiUrl(this.api_url);
+    }
+    if (this.image_url !== "") {
+      API.setImageUrl(this.image_url);
+    }
 
     // document and project config
     Promise.all([
@@ -128,4 +182,4 @@ export default {
 };
 </script>
 
-<style lang="scss" src="../assets/scss/main.scss"></style>
+<style lang="scss" src="../assets/scss/theme.scss"></style>

package/src/components/DocumentPage/NewAnnotation.vue

@@ -5,6 +5,7 @@
       v-model="selectedSet"
       aria-role="list"
       :class="[
+        'annotation-dropdown',
         'no-padding-bottom',
         setsList.length === 0 ? 'no-padding-top' : '',
       ]"
@@ -69,7 +70,7 @@
         v-model="selectedLabel"
         aria-role="list"
         :disabled="!labels || labels.length === 0"
-        class="label-dropdown"
+        class="label-dropdown annotation-dropdown"
       >
         <template #trigger>
           <b-button

package/src/locales/de.json

@@ -63,11 +63,11 @@
   "selected": "ausgewählt",
   "rotate_selected": "Ausgewählte Seite drehen",
   "edit_not_available": "Dokumente mit dem Status 'Vorbereitung', 'Training' oder 'Test' sowie Dokumente mit dem Status 'Geprüft' können nicht bearbeitet werden.",
-  "rotate_split_reorder": "Rotate, split or reorder",
-  "rename_and_categorize": "Rename and Categorize",
+  "rotate_split_reorder": "Rotieren, teilen oder sortieren",
+  "rename_and_categorize": "Umbenennen und kategorisieren",
   "submit": "Senden",
-  "next": "Next: Rename and Categorize",
-  "back_to_annotations": "Back to annotation view",
+  "next": "Nächster Schritt: Umbenennen und kategorisieren",
+  "back_to_annotations": "Züruck zur Hauptansicht",
   "select_label": "Label auswählen",
   "select_annotation_set": "Wähle Annotation Set",
   "accept": "Akzeptieren",

package/src/main.js

@@ -1,10 +1,7 @@
 import Vue from "vue";
 import Buefy from "buefy";
-import "buefy/dist/buefy.css";
 import VueKonva from "vue-konva";
 import App from "./components/App";
-import * as Sentry from "@sentry/vue";
-import { Integrations } from "@sentry/tracing";
 import i18n from "./i18n";
 import store from "./store";
 import { library } from "@fortawesome/fontawesome-svg-core";
@@ -59,27 +56,6 @@ Vue.use(Buefy, {
 });
 Vue.use(VueObserveVisibility);
 
-// Sentry config
-if (process.env.NODE_ENV != "development") {
-  Sentry.init({
-    Vue,
-    dsn: process.env.VUE_APP_SENTRY_DSN,
-    integrations: [new Integrations.BrowserTracing()],
-    environment: process.env.VUE_APP_SENTRY_ENVIRONMENT,
-
-    // We recommend adjusting this value in production, or using tracesSampler
-    // for finer control
-    tracesSampleRate: 1.0,
-
-    // If false, errors won't show up in devtools
-    logErrors: true,
-
-    tracingOptions: {
-      trackComponents: true,
-    },
-  });
-}
-
 /**
  * Main entrypoint for the App
  */