Merge to master: Release 2.5.1 - New metadata models and new upload & edit submission UIs

app/assets/stylesheets/application.css.scss.erb

@@ -45,11 +45,18 @@
 @import "register";
 @import "lostpassword";
 @import "flatpickr/dist/themes/light";
+@import "tom-select/dist/scss/tom-select";
+@import "tippy.js/dist/tippy";
+@import 'tippy.js/themes/light-border';
 @import "feedback";
 @import "login";
 @import "components/index";
 @import "account";
-
+@import "upload_ontology";
+@import "edit-ontology";
+@import "nav_bar";
+@import "ontology_details_header";
+@import "ontology_viewer";
 /* Bootstrap and Font Awesome */
 @import "bootstrap";
 @import "bootstrap_overrides";

app/assets/stylesheets/bioportal.scss

@@ -1149,7 +1149,7 @@ a.truncated_less, a.truncated_more {
 
 }
 
-turbo-frame[busy] .hide-if-loading, .show-if-loading {
+turbo-frame[busy] > .hide-if-loading, .show-if-loading {
   display: none;
 }
 turbo-frame[busy] ~ .show-if-loading {

app/assets/stylesheets/components/chips.scss

@@ -1,4 +1,4 @@
-.chips-container div{
+.chips-container > div{
     margin-right: 10px;
 }
 
@@ -11,6 +11,7 @@
     display: none;
 }
 
+
 .chips-container div label{
     cursor: pointer;
 }

app/assets/stylesheets/components/header.scss

@@ -0,0 +1,16 @@
+.header-component {
+    display: flex;
+    align-items: center;
+    margin-bottom: 5px;
+    font-weight: 550;
+    justify-content: space-between;
+    font-size: 16px;
+    color: #000000;
+    cursor: pointer;
+    width: 100%;
+    padding: 14px 20px;
+    position: relative;
+    p {
+        margin-bottom: 0;
+    }
+}

app/assets/stylesheets/components/input_field.scss

@@ -0,0 +1,95 @@
+.input-field-component {
+  width: 100%;
+  font-size: 13px;
+  padding: 10px;
+  border: 1px solid #BDBDBD;
+  border-radius: 5px;
+  outline: none;
+  resize: none;
+}
+
+.input-field-component:focus {
+  border: 1px solid var(--primary-color);
+}
+
+.text-input-label {
+    font-size: 14px;
+    color: #666666;
+    margin-bottom: 5px;
+  img {
+    width: 15px;
+    height: 15px;
+    vertical-align: text-bottom;
+  }
+}
+
+.text-input-error-text {
+  font-size: 12px;
+  color: var(--error-color)
+}
+
+.text-input-helper-text {
+  font-size: 12px;
+  color: #666666;
+  margin-top: 5px;
+}
+
+.ts-control {
+  padding: 12px;
+  border-radius: 5px;
+  border-color: #BDBDBD;
+}
+
+.ts-dropdown-content .option {
+  padding: 12px;
+}
+
+.ts-dropdown .active {
+  background-color: #f8f8f8;
+
+}
+
+.ts-dropdown {
+  margin: 0;
+  color: #666666;
+}
+
+.chosen-container {
+  padding: 0;
+  border-radius: 5px;
+}
+
+.ts-wrapper.single .ts-control:after {
+  border-color: #343a40 transparent transparent;
+  border-style: solid;
+  border-width: 5px 5px 0;
+  content: " ";
+  display: block;
+  height: 0;
+  margin-top: -3px;
+  position: absolute;
+  right: calc(0.75rem + 5px);
+  top: 50%;
+  width: 0;
+}
+
+.ts-wrapper.multi .ts-control>div{
+  border-radius: 5px;
+  font-size: 11px;
+  padding: 2px 0 4px 6px;
+  color: #888888;
+}
+
+.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove{
+  border-left: none;
+  color: #888888 !important;
+  margin-left: 0;
+}
+
+.ts-wrapper.plugin-remove_button .item .remove:hover {
+  background: unset;
+}
+
+.has-items .ts-control > input {
+  width: unset !important;
+}

app/assets/stylesheets/components/nested_form.scss

@@ -0,0 +1,55 @@
+.nested-form-input-container .titles{
+  display: flex;
+  font-size: 14px;
+  color: #666666;
+  margin-bottom: 5px;
+  width: 90%;
+  img {
+    width: 15px;
+    height: 15px;
+    vertical-align: text-bottom;
+  }
+}
+
+
+.nested-form-input-container  input:focus{
+  border: 1px solid var(--primary-color) !important;
+}
+
+.nested-form-input-container .delete{
+  display: flex;
+  border: 1px dashed #BDBDBD;
+  justify-content: center;
+  align-items: center;
+  height: 43px;
+  width: 43px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.nested-form-input-container .add-another-object{
+  border: 1px dashed #BDBDBD;
+  border-radius: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+.nested-form-input-container svg path{
+  fill: #DADADA;
+}
+.nested-form-input-container .add-another-object div{
+  color: #DADADA;
+  margin-left: 10px;
+}
+
+
+
+
+
+
+
+
+

app/assets/stylesheets/components/primary_button.scss

@@ -0,0 +1,101 @@
+.button-container{
+    width: 100%;
+}
+.primary-button {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+    color: white;
+    height: 60px;
+    background-color: var(--primary-color);
+    border: none;
+    border-radius: 9px;
+    transition: background-color ease 0.3s;
+}
+.primary-button:hover {
+    background-color: var(--hover-color);
+    cursor: pointer;
+}
+
+
+.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;
+
+}
+.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);
+    }
+}

app/assets/stylesheets/components/search_input.scss

@@ -0,0 +1,44 @@
+.search-container{
+  display: none;
+  font-size: 16px;
+  background: white;
+  width: 100%;
+  border-radius: 0 0 14px 14px;
+  border: none;
+  box-shadow: 2px 30px 60px rgba(0, 0, 0, 0.1);
+}
+
+.search-content{
+  display: flex;
+  color: #777777 !important;
+  justify-content: space-between;
+  padding: 20px 20px;
+  cursor: pointer;
+  border-top: 1px solid #f7f7f7
+}
+.search-content:hover{
+  background-color: rgba(0, 0, 0, 0.01);
+}
+.search-content div{
+  display: flex;
+}
+.search-content div img{
+  width: 12px;
+}
+.search-content div p{
+  font-weight: 300;
+  margin-left: 10px;
+  margin-bottom: 0;
+}
+
+.search-dropdown-active{
+  box-shadow: none !important;
+}
+
+.search-element{
+  margin-bottom: 0;
+}
+
+.searched-elements{
+  margin-bottom: 0;
+}