Add selected UI view components code for turbo frame, tabs, loaders a…

…nd alerts
ontoportal · Oct 12, 2024 · a977d44 · a977d44
1 parent 08bbab0
commit a977d44
Show file tree

Hide file tree

Showing 41 changed files with 1,470 additions and 45 deletions.
diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
@@ -4,4 +4,6 @@
 //= link bp_annotator.js
 //= link bp_annotatorplus.js
 //= link vendor.js
+//= link_tree ../images
+//= link_directory ../javascripts .js
 //= link_directory ../stylesheets .css
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -32,3 +32,6 @@
 //= require projects
 //= require submissions
 
+//= require application_esbuild
+
+
diff --git a/app/assets/stylesheets/application.css.scss → ...sets/stylesheets/application.css.scss.erb b/app/assets/stylesheets/application.css.scss → ...sets/stylesheets/application.css.scss.erb
@@ -20,6 +20,7 @@
  *= require select2
  *= require trumbowyg
  *= require flag-icon
+ *= require theme-variables
  *
  */
 
@@ -40,8 +41,11 @@
 @import "search";
 @import "submissions";
 @import "tree";
-@import "ontolobridge";
+@import "ontology_viewer";
+@import "components/index";
 
 /* Bootstrap and Font Awesome */
 @import "bootstrap";
 @import "bootstrap_overrides";
+
+
diff --git a/app/assets/stylesheets/components/alert.scss b/app/assets/stylesheets/components/alert.scss
@@ -0,0 +1,102 @@
+.alert-container {
+  display: flex;
+  align-items: center;
+  padding: 20px;
+  border-radius: 5px;
+
+
+}
+
+.alert-container.alert-info-type {
+  background-color: var(--bg-info-light-color);
+}
+
+.alert-container.alert-warning-type {
+  background-color: var(--bg-warning-light-color);
+}
+
+.alert-container.alert-danger-type {
+  background-color: var(--bg-danger-light-color);
+}
+
+.alert-container.alert-success-type {
+  background-color: var(--bg-success-light-color);
+}
+
+
+.alert-message {
+  font-size: 16px;
+  margin: 0 10px;
+  width: 100%;
+}
+
+
+.alert-message.alert-info-type {
+  color: rgb(59, 130, 246);
+}
+
+.alert-message.alert-warning-type {
+  color: rgb(234, 179, 8);
+}
+
+.alert-message.alert-danger-type {
+  color: rgb(239, 68, 68);
+}
+
+.alert-message.alert-success-type {
+  color: rgb(34, 197, 94);
+}
+
+.alert-icon {
+  align-self: flex-start;
+}
+
+.alert-icon svg {
+  width: 25px;
+  margin: 0 !important;
+}
+
+.alert-icon.alert-info-type svg path {
+  fill: rgb(59, 130, 246);
+}
+
+.alert-icon.alert-warning-type svg path {
+  fill: rgb(234, 179, 8);
+}
+
+.alert-icon.alert-danger-type svg path {
+  fill: rgb(239, 68, 68);
+}
+
+.alert-icon.alert-success-type svg path {
+  fill: rgb(34, 197, 94);
+}
+
+
+.alert-close svg {
+  width: 25px;
+  cursor: pointer;
+}
+
+.alert-close.alert-info-type svg path {
+  fill: rgb(59, 130, 246);
+}
+
+.alert-close.alert-warning-type svg path {
+  fill: rgb(234, 179, 8);
+}
+
+.alert-close.alert-danger-type svg path {
+  fill: rgb(239, 68, 68);
+}
+
+.alert-close.alert-success-type svg path {
+  fill: rgb(34, 197, 94);
+}
+
+
+.alert-button {
+  white-space: nowrap;
+  margin-right: 20px;
+}
+
diff --git a/app/assets/stylesheets/components/index.scss b/app/assets/stylesheets/components/index.scss
@@ -0,0 +1,4 @@
+@import 'regular_button';
+@import 'tabs_container';
+@import "loader";
+@import "alert";
diff --git a/app/assets/stylesheets/components/loader.scss b/app/assets/stylesheets/components/loader.scss
@@ -0,0 +1,12 @@
+.loader-component{
+    display: flex;
+    justify-content: center;
+}
+
+.lds-ellipsis.loader-component{
+    transform: scale(1);
+}
+
+.lds-ellipsis.loader-component div{
+    background: var(--primary-color);
+}
diff --git a/app/assets/stylesheets/components/regular_button.scss b/app/assets/stylesheets/components/regular_button.scss
@@ -0,0 +1,213 @@
+.regular-button {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+    height: 60px;
+    border-radius: 9px;
+    padding: 0 30px;
+}
+.regular-button.slim{
+    border-radius: 5px;
+    height: 42px;
+    padding: 0 15px;
+}
+
+.primary-button {
+    color: white !important;
+    background-color: var(--primary-color);
+    border: none;
+    transition: background-color ease 0.3s;
+}
+.primary-button:focus {
+    outline: none;
+}
+
+.primary-button:hover {
+    background-color: var(--hover-color);
+    cursor: pointer;
+}
+
+.primary-button.disabled-button{
+    background-color: #a3a3a3;
+}
+.primary-button.disabled-button:hover {
+    background-color: #a3a3a3;
+    cursor:default;
+}
+
+.danger-button.primary-button {
+    background-color: #F24C3D !important;
+}
+
+.danger-button.primary-button:hover {
+    background-color: #d74639 !important;
+}
+
+.warning-button.primary-button {
+    background-color: #F2BE22 !important;
+}
+
+.warning-button.primary-button:hover {
+    background-color: #dcac1d !important;
+}
+
+.secondary-button {
+    color: var(--primary-color) !important;
+    border: 1px solid var(--primary-color);
+    transition: background-color ease 0.3s;
+    background-color: rgba(0, 0, 0, 0) !important;
+}
+
+.secondary-button:focus {
+    outline: none;
+}
+
+.secondary-button:hover {
+    background-color: var(--primary-color) !important;
+    cursor: pointer;
+    color: white !important;
+
+    .secondary-button-icon path {
+        fill: white;
+    }
+}
+
+.secondary-button.disabled-button {
+    border: 1px solid #a3a3a3;
+    color: #a3a3a3 !important;
+}
+
+.secondary-button.disabled-button:hover {
+    background-color: rgba(0, 0, 0, 0) !important;
+    cursor: default;
+    color: #a3a3a3 !important;
+}
+
+.secondary-button.danger-button {
+    color: #F24C3D !important;
+    border: 1px solid #F24C3D;
+}
+.secondary-button.danger-button:hover {
+    background-color: #F24C3D !important;
+    color: white !important;
+}
+.secondary-button.warning-button {
+    color: #F2BE22 !important;
+    border: 1px solid #F2BE22;
+}
+
+.secondary-button.warning-button:hover {
+    background-color: #dcac1d !important;
+    color: white !important;
+}
+
+.left-button-icon{
+    margin-right: 10px;
+    margin-bottom: 3px;
+}
+
+.right-button-icon {
+    margin-left: 10px;
+    margin-bottom: 3px;
+}
+
+.secondary-button-icon path {
+    fill: var(--primary-color);
+}
+
+.primary-button-icon path {
+    fill: white !important;
+}
+
+
+.animation-container {
+    width: 100%;
+    height: 60px;
+    font-size: 16px;
+    background-color: var(--hover-color);
+    border: none;
+    border-radius: 9px;
+    justify-content: center;
+    align-items: center;
+    display: none;
+}
+.animation-container.slim {
+    border-radius: 5px;
+    height: 42px;
+}
+.animation-container.danger-button{
+    background-color: #d74639 !important;
+}
+.animation-container.warning-button{
+    background-color: #dcac1d !important;
+}
+
+.lds-ellipsis {
+    display: inline-block;
+    position: relative;
+    margin-top: 50px;
+    width: 80px;
+    height: 80px;
+    transform: scale(0.7);
+}
+
+.lds-ellipsis div {
+    position: absolute;
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    background: white;
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+
+.lds-ellipsis div:nth-child(1) {
+    left: 8px;
+    animation: lds-ellipsis1 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(2) {
+    left: 8px;
+    animation: lds-ellipsis2 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(3) {
+    left: 32px;
+    animation: lds-ellipsis2 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(4) {
+    left: 56px;
+    animation: lds-ellipsis3 0.6s infinite;
+}
+
+@keyframes lds-ellipsis1 {
+    0% {
+        transform: scale(0);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes lds-ellipsis3 {
+    0% {
+        transform: scale(1);
+    }
+
+    100% {
+        transform: scale(0);
+    }
+}
+
+@keyframes lds-ellipsis2 {
+    0% {
+        transform: translate(0, 0);
+    }
+
+    100% {
+        transform: translate(24px, 0);
+    }
+}