From 6565f7610c1250310cbc7f5e02e7ed586f8bb085 Mon Sep 17 00:00:00 2001
From: Sami Ekblad <sami@vaadin.com>
Date: Wed, 25 Sep 2024 12:34:50 +0300
Subject: [PATCH] ui improvements

---
 .../com/example/demo/OllamaConfigView.java    | 29 +++++++++++++++++--
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/main/java/com/example/demo/OllamaConfigView.java b/src/main/java/com/example/demo/OllamaConfigView.java
index f874169..6b6957c 100644
--- a/src/main/java/com/example/demo/OllamaConfigView.java
+++ b/src/main/java/com/example/demo/OllamaConfigView.java
@@ -11,6 +11,7 @@
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.component.page.WebStorage;
 import com.vaadin.flow.component.select.Select;
+import com.vaadin.flow.component.textfield.TextArea;
 import com.vaadin.flow.component.textfield.TextField;
 import com.vaadin.flow.dom.Element;
 import com.vaadin.flow.router.Route;
@@ -108,10 +109,10 @@ public OllamaConfigView() {
     private Component createForm(ModelDetail modelDetail) {
         FormLayout form = new FormLayout();
 
-        TextField licenseField = new TextField("License", modelDetail.getLicense(), "");
+        TextArea licenseField = new TextArea("License", modelDetail.getLicense(), "");
         licenseField.setReadOnly(true);
 
-        TextField modelFileField = new TextField("Model File", modelDetail.getModelFile(), "");
+        TextArea modelFileField = new TextArea("Model File", modelDetail.getModelFile(), "");
         modelFileField.setReadOnly(true);
 
         TextField parametersField = new TextField("Parameters", ""+modelDetail.getParameters(), "");
@@ -186,6 +187,7 @@ public Loader() {
             setClassName("loader");
             Element styles = new Element("style");
             styles.setText("""
+                    .loader {
                       width: var(--lumo-size-m);
                       height: calc(var(--lumo-size-m)/4);
                       background: var(--lumo-primary-text-color);
@@ -224,7 +226,28 @@ public Loader() {
                         transform: translate(-50%, -5px);
                       }
                     }
-                    """);
+                   .progress-bar {
+                        width: 100%;
+                        height: 30px;
+                        background: linear-gradient(90deg, #4caf50 0%, #4caf50 var(--progress), #f0f0f0 var(--progress), #f0f0f0 100%);
+                        position: relative;
+                        overflow: hidden;
+                   }
+                   .progress-bar::after {
+                        content: '';
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        width: 100%;
+                        height: 100%;
+                        background: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.0) 100%);
+                        animation: chase 2s infinite linear;
+                   }
+                   @keyframes chase {
+                        0% { transform: translateX(-100%); }
+                        100% { transform: translateX(100%); }
+                   }
+                   """);
             getElement().appendChild(styles);
         }