Prettify progress bar and start in indeterminate state
Change-Id: Idaef58eab8f93d9dfd25216414f3181934c68df0
diff --git a/plugin/src/main/resources/assets/export.js b/plugin/src/main/resources/assets/export.js
index bc4b6c2..eef6ad0 100644
--- a/plugin/src/main/resources/assets/export.js
+++ b/plugin/src/main/resources/assets/export.js
@@ -118,8 +118,6 @@
sse.addEventListener('Process', function (e) {
prog.style.display = "block";
if (e.data == "init") {
- prog.value = 1;
- prog.textualData = "1%";
window.Plugin.resize();
}
else if (e.data == 'done') {
@@ -127,6 +125,7 @@
prog.value = 100;
prog.textualData = "100%";
+ // Relocate to new target
if (relocationURL != null)
location.href = relocationURL.href;
}
diff --git a/plugin/src/main/resources/assets/templates/export.ftl b/plugin/src/main/resources/assets/templates/export.ftl
index e19950c..424a79c 100644
--- a/plugin/src/main/resources/assets/templates/export.ftl
+++ b/plugin/src/main/resources/assets/templates/export.ftl
@@ -7,12 +7,49 @@
<script src="${assetPath}/js/korap-plugin-latest.js"></script>
<link href="${assetPath}/css/kalamar-plugin-latest.css" type="text/css" rel="stylesheet" />
<style>
+
progress {
- min-width: 20em;
- width: 20%;
- padding:8px;
- margin-top: 2em;
- };
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ min-width: 20em;
+ width: 20%;
+ height: 2em;
+ margin-top: 2em;
+ border-radius: 6px;
+ background-color: #d9dadb;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
+ background-image: none;
+ }
+
+ progress::-webkit-progress-bar {
+ border-radius: 6px;
+ border: 1px solid #636f07;
+ background-color: #d9dadb;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
+ background-image: none;
+ }
+
+ progress::-moz-progress-bar {
+ border: 0;
+ background-color: #8a9a0a;
+ transition: all .3s ease-in-out 0s;
+ }
+
+ progress::-webkit-progress-value {
+ border: 0;
+ background-color: #8a9a0a;
+ transition: all .3s ease-in-out 0s;
+ }
+
+ progress:indeterminate::-webkit-progress-bar {
+ background-color: #f6a800;
+ }
+
+ progress:indeterminate::-moz-progress-bar {
+ background-color: #f6a800;
+ }
+
</style>
</head>
<body>