@imposium-hub/components 2.2.44-2 → 2.2.44-4

package/dist/styles.less

@@ -244,33 +244,32 @@ body{
         }
     }
 }
-
-.new-tag{
+.new-tag {
     display: inline-block;
-    width:150px;
-    height:@inputHeight;
+    width: 150px;
+    height: @inputHeight;
     vertical-align: top;
     margin-top: 1px;
-    margin-left:2px;
-    input{
-        width:100%;
-        height:@inputHeight;
+    margin-left: 2px;
+    input {
+        width: 100%;
+        height: @inputHeight;
         display: inline-block;
-        background:none;
-        border:none;
-        color:@textDefault;
-        font-size:@fontSizeSmall;
-        box-sizing:border-box;
+        background: none;
+        border: none;
+        color: @textDefault;
+        font-size: @fontSizeSmall;
+        box-sizing: border-box;
         vertical-align: top;
-        border-radius:0px;
-        appearance:none;
+        border-radius: 0px;
+        appearance: none;
 
-        &:hover{
-            background:rgba(0,0,0,0.2);
+        &:hover {
+            background: rgba(0, 0, 0, 0.2);
         }
 
-        &:focus{
-            background:rgba(0,0,0,0.2);
+        &:focus {
+            background: rgba(0, 0, 0, 0.2);
         }
     }
 }
@@ -288,9 +287,53 @@ body{
     display: none;
 }
 
+.no-ongoing-uploads {
+    text-align: center;
+    margin: auto;
+}
+
+.uploads-dropzone {
+    &.show {
+        position: absolute;
+        top: 0;
+        height: 100%;
+        z-index: 200000;
+    }
+
+    &.table-hover {
+        .uploads-menu {
+            display: none;
+        }
+    }
+    &.asset-over {
+        .uploads-menu {
+            opacity: 0.3;
+        }
+        .overlay {
+            border-style: dashed;
+            border-color: hsl(225, 100%, 50%);
+            border-width: medium;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            -ms-transform: translate(-50%, -50%);
+            text-align: center;
+            height: 98%;
+            width: 99%;
+            display: flex;
+            z-index: 1;
+            p {
+                vertical-align: middle;
+                margin: auto;
+            }
+        }
+    }
+}
+
 .uploads-menu {
-    width: 670px;
-    height: 175px;
+    width: 703px;
+    height: 100%;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
@@ -307,11 +350,12 @@ body{
 
     .uploads-list {
         width: 100%;
+        height: 100%;
         box-sizing: border-box;
         margin-top: 5px;
         padding: 5px;
         border-top: 1px solid #494949;
-
+        margin-bottom: 25px;
         .ongoing-upload {
             display: flex;
             flex-direction: column;
@@ -320,15 +364,30 @@ body{
         }
     }
 
-    .form-field{
+    .uploads-confirm {
+        display: flex;
+        flex-direction: row;
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        border-top: 1px solid #494949;
+        background: #272727;
+        .checkbox-field {
+            top: 2px;
+        }
+        .imposium-btn {
+            padding-top: 3px;
+        }
+    }
 
-        vertical-align:top;
-        label{
-            width:120px;
+    .form-field {
+        vertical-align: top;
+        label {
+            width: 120px;
         }
 
-        .form-field-content{
-            width:calc(100% - 120px);
+        .form-field-content {
+            width: calc(100% - 120px);
         }
     }
 }
@@ -337,9 +396,9 @@ body{
     padding: 7px;
     border-bottom: 1px solid #494949;
     background: @background;
-    display:inline-block;
-    &:hover{
-        background:@backgroundLight;
+    display: inline-block;
+    &:hover {
+        background: @backgroundLight;
     }
 }
 
@@ -373,8 +432,8 @@ body{
 }
 
 .tags-column {
-    position:relative;
-    padding-right:50px;
+    position: relative;
+    padding-right: 50px;
     display: flex;
     align-items: center;
     flex-wrap: wrap;
@@ -386,34 +445,36 @@ body{
     .form-field {
         margin: 0 0.6rem 0 0;
 
-        .form-field-buttons{
+        .form-field-buttons {
             height: 22px;
         }
-        textarea{
+        textarea {
             height: unset;
         }
     }
 }
 
-.tags-column, .new-tag, .asset-details {
+.tags-column,
+.new-tag,
+.asset-details {
     .rta {
         margin-left: 5px;
         .rta__textarea {
             height: 22px;
         }
-        .rta__autocomplete{
+        .rta__autocomplete {
             position: absolute;
             top: 22px !important;
             z-index: 1;
             background: #161616;
             border: 1px solid #272727;
             overflow: auto;
-            .rta__list{
+            .rta__list {
                 list-style: none;
                 height: 60px;
-                .rta__item{
+                .rta__item {
                     padding-bottom: 1px;
-                    .rta__entity--selected{
+                    .rta__entity--selected {
                         background-color: #353535;
                     }
                     .variable {
@@ -425,11 +486,12 @@ body{
     }
 }
 
-.tags-column, .asset-details {
+.tags-column,
+.asset-details {
     .rta .rta__autocomplete {
         left: 105px !important;
     }
-} 
+}
 
 .tags-column .rta .rta__autocomplete {
     width: 173px;
@@ -464,53 +526,82 @@ body{
     margin-top: -3px;
 }
 
-.asset-status-cell{
-    width:100%;
-    height:100%;
+.asset-status-cell {
+    width: 100%;
+    height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
 
-    .status-indicator{
-        width:5px;
-        height:100%;
-        box-sizing:border-box;
+    .status-indicator {
+        width: 5px;
+        height: 100%;
+        box-sizing: border-box;
 
-        &.processing{
-            background:#c5b73d;
+        &.processing {
+            background: #c5b73d;
         }
 
-        &.complete{
-            background:#307f35;
+        &.complete {
+            background: #307f35;
         }
     }
 }
 
-.ongoing-upload-inner{
+.ongoing-upload-inner {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    width: 100%
+    width: 100%;
+    .tags-column {
+        width: unset;
+        padding: unset;
+        bottom: 2px;
+        margin-right: auto;
+    }
+
+    .upload-filename {
+        display: inline-block;
+        background: #1d1d1d;
+        border: none;
+        color: #dfdfdf;
+        font-size: 12px;
+        box-sizing: border-box;
+        vertical-align: top;
+        height: 20px;
+        width: 200px;
+        font-family: 'Roboto Condensed', sans-serif;
+        border-radius: 0;
+        appearance: none;
+        padding: 4px;
+        margin-right: 5px;
+    }
+
+    .imposium-btn {
+        height: fit-content;
+        position: relative;
+        top: 2px;
+    }
 }
 
-.asset-preview-background{
-    border:1px solid @backgroundDark;
+.asset-preview-background {
+    border: 1px solid @backgroundDark;
     background-color: @background;
-    
-    &.transparent{
+
+    &.transparent {
         .chess;
     }
 
-    &.hidden{
+    &.hidden {
         opacity: 0;
     }
 }
-.close-icon-preview{
+.close-icon-preview {
     z-index: 9999 !important;
     justify-content: flex-end;
     display: flex;
     height: 30px !important;
-    align-items: center
+    align-items: center;
 }
 
 .error-preview {
@@ -522,6 +613,7 @@ body{
         height: 30px !important;
     }
 }
+
 .auth-gate {
   .layer;
   display: flex;

package/less/components/assets.less

@@ -1,30 +1,29 @@
-
-.new-tag{
+.new-tag {
     display: inline-block;
-    width:150px;
-    height:@inputHeight;
+    width: 150px;
+    height: @inputHeight;
     vertical-align: top;
     margin-top: 1px;
-    margin-left:2px;
-    input{
-        width:100%;
-        height:@inputHeight;
+    margin-left: 2px;
+    input {
+        width: 100%;
+        height: @inputHeight;
         display: inline-block;
-        background:none;
-        border:none;
-        color:@textDefault;
-        font-size:@fontSizeSmall;
-        box-sizing:border-box;
+        background: none;
+        border: none;
+        color: @textDefault;
+        font-size: @fontSizeSmall;
+        box-sizing: border-box;
         vertical-align: top;
-        border-radius:0px;
-        appearance:none;
+        border-radius: 0px;
+        appearance: none;
 
-        &:hover{
-            background:rgba(0,0,0,0.2);
+        &:hover {
+            background: rgba(0, 0, 0, 0.2);
         }
 
-        &:focus{
-            background:rgba(0,0,0,0.2);
+        &:focus {
+            background: rgba(0, 0, 0, 0.2);
         }
     }
 }
@@ -42,9 +41,53 @@
     display: none;
 }
 
+.no-ongoing-uploads {
+    text-align: center;
+    margin: auto;
+}
+
+.uploads-dropzone {
+    &.show {
+        position: absolute;
+        top: 0;
+        height: 100%;
+        z-index: 200000;
+    }
+
+    &.table-hover {
+        .uploads-menu {
+            display: none;
+        }
+    }
+    &.asset-over {
+        .uploads-menu {
+            opacity: 0.3;
+        }
+        .overlay {
+            border-style: dashed;
+            border-color: hsl(225, 100%, 50%);
+            border-width: medium;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            -ms-transform: translate(-50%, -50%);
+            text-align: center;
+            height: 98%;
+            width: 99%;
+            display: flex;
+            z-index: 1;
+            p {
+                vertical-align: middle;
+                margin: auto;
+            }
+        }
+    }
+}
+
 .uploads-menu {
-    width: 670px;
-    height: 175px;
+    width: 703px;
+    height: 100%;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
@@ -61,11 +104,12 @@
 
     .uploads-list {
         width: 100%;
+        height: 100%;
         box-sizing: border-box;
         margin-top: 5px;
         padding: 5px;
         border-top: 1px solid #494949;
-
+        margin-bottom: 25px;
         .ongoing-upload {
             display: flex;
             flex-direction: column;
@@ -74,15 +118,30 @@
         }
     }
 
-    .form-field{
+    .uploads-confirm {
+        display: flex;
+        flex-direction: row;
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        border-top: 1px solid #494949;
+        background: #272727;
+        .checkbox-field {
+            top: 2px;
+        }
+        .imposium-btn {
+            padding-top: 3px;
+        }
+    }
 
-        vertical-align:top;
-        label{
-            width:120px;
+    .form-field {
+        vertical-align: top;
+        label {
+            width: 120px;
         }
 
-        .form-field-content{
-            width:calc(100% - 120px);
+        .form-field-content {
+            width: calc(100% - 120px);
         }
     }
 }
@@ -91,9 +150,9 @@
     padding: 7px;
     border-bottom: 1px solid #494949;
     background: @background;
-    display:inline-block;
-    &:hover{
-        background:@backgroundLight;
+    display: inline-block;
+    &:hover {
+        background: @backgroundLight;
     }
 }
 
@@ -127,8 +186,8 @@
 }
 
 .tags-column {
-    position:relative;
-    padding-right:50px;
+    position: relative;
+    padding-right: 50px;
     display: flex;
     align-items: center;
     flex-wrap: wrap;
@@ -140,34 +199,36 @@
     .form-field {
         margin: 0 0.6rem 0 0;
 
-        .form-field-buttons{
+        .form-field-buttons {
             height: 22px;
         }
-        textarea{
+        textarea {
             height: unset;
         }
     }
 }
 
-.tags-column, .new-tag, .asset-details {
+.tags-column,
+.new-tag,
+.asset-details {
     .rta {
         margin-left: 5px;
         .rta__textarea {
             height: 22px;
         }
-        .rta__autocomplete{
+        .rta__autocomplete {
             position: absolute;
             top: 22px !important;
             z-index: 1;
             background: #161616;
             border: 1px solid #272727;
             overflow: auto;
-            .rta__list{
+            .rta__list {
                 list-style: none;
                 height: 60px;
-                .rta__item{
+                .rta__item {
                     padding-bottom: 1px;
-                    .rta__entity--selected{
+                    .rta__entity--selected {
                         background-color: #353535;
                     }
                     .variable {
@@ -179,11 +240,12 @@
     }
 }
 
-.tags-column, .asset-details {
+.tags-column,
+.asset-details {
     .rta .rta__autocomplete {
         left: 105px !important;
     }
-} 
+}
 
 .tags-column .rta .rta__autocomplete {
     width: 173px;
@@ -218,53 +280,82 @@
     margin-top: -3px;
 }
 
-.asset-status-cell{
-    width:100%;
-    height:100%;
+.asset-status-cell {
+    width: 100%;
+    height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
 
-    .status-indicator{
-        width:5px;
-        height:100%;
-        box-sizing:border-box;
+    .status-indicator {
+        width: 5px;
+        height: 100%;
+        box-sizing: border-box;
 
-        &.processing{
-            background:#c5b73d;
+        &.processing {
+            background: #c5b73d;
         }
 
-        &.complete{
-            background:#307f35;
+        &.complete {
+            background: #307f35;
         }
     }
 }
 
-.ongoing-upload-inner{
+.ongoing-upload-inner {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    width: 100%
+    width: 100%;
+    .tags-column {
+        width: unset;
+        padding: unset;
+        bottom: 2px;
+        margin-right: auto;
+    }
+
+    .upload-filename {
+        display: inline-block;
+        background: #1d1d1d;
+        border: none;
+        color: #dfdfdf;
+        font-size: 12px;
+        box-sizing: border-box;
+        vertical-align: top;
+        height: 20px;
+        width: 200px;
+        font-family: 'Roboto Condensed', sans-serif;
+        border-radius: 0;
+        appearance: none;
+        padding: 4px;
+        margin-right: 5px;
+    }
+
+    .imposium-btn {
+        height: fit-content;
+        position: relative;
+        top: 2px;
+    }
 }
 
-.asset-preview-background{
-    border:1px solid @backgroundDark;
+.asset-preview-background {
+    border: 1px solid @backgroundDark;
     background-color: @background;
-    
-    &.transparent{
+
+    &.transparent {
         .chess;
     }
 
-    &.hidden{
+    &.hidden {
         opacity: 0;
     }
 }
-.close-icon-preview{
+.close-icon-preview {
     z-index: 9999 !important;
     justify-content: flex-end;
     display: flex;
     height: 30px !important;
-    align-items: center
+    align-items: center;
 }
 
 .error-preview {
@@ -275,4 +366,4 @@
     &.audio {
         height: 30px !important;
     }
-}
+}