IBX-4085: Design fixes to form edit (#625)

ibexa · Nov 8, 2022 · e5de669 · e5de669
1 parent 7388865
commit e5de669
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 14 deletions.
diff --git a/src/bundle/Resources/public/scss/_inputs.scss b/src/bundle/Resources/public/scss/_inputs.scss
@@ -381,6 +381,8 @@
     }
 
     &--type-number {
+        max-width: calculateRem(150px);
+
         .ibexa-input-text-wrapper {
             &__actions {
                 right: calculateRem(32px);

diff --git a/src/bundle/Resources/public/scss/_tables.scss b/src/bundle/Resources/public/scss/_tables.scss
@@ -134,6 +134,11 @@
 
         &--has-checkbox {
             width: calculateRem(48px);
+
+            .ibexa-input--checkbox {
+                float: left;
+                margin-bottom: 0;
+            }
         }
 
         .table &--has-icon {
@@ -181,7 +186,9 @@
 
     &--not-striped {
         .ibexa-table__row {
-            background-color: $ibexa-color-white;
+            .ibexa-table__cell {
+                background-color: $ibexa-color-white;
+            }
         }
     }
 }

diff --git a/src/bundle/Resources/public/scss/fieldType/edit/_base-field.scss b/src/bundle/Resources/public/scss/fieldType/edit/_base-field.scss
@@ -25,6 +25,10 @@
         flex-direction: column;
     }
 
+    .form-control {
+        margin-bottom: 0;
+    }
+
     &--nontranslatable,
     &--disabled {
         pointer-events: none;

diff --git a/src/bundle/Resources/public/scss/fieldType/edit/_base-preview.scss b/src/bundle/Resources/public/scss/fieldType/edit/_base-preview.scss
@@ -105,14 +105,25 @@
                 &__actions {
                     display: flex;
                     position: absolute;
-                    top: calculateRem(8px);
-                    right: calculateRem(8px);
+                    top: 0;
+                    right: 0;
                     border-radius: $ibexa-border-radius;
                     padding: calculateRem(4px);
-                    background-color: rgba($ibexa-color-white, 0.75);
+                    background-color: $ibexa-color-white;
+                    box-shadow: calculateRem(-4px) calculateRem(10px) calculateRem(20px) 0 rgba($ibexa-color-info, 0.15);
                     z-index: 1;
                 }
             }
         }
+
+        &__file-name-wrapper {
+            overflow: hidden;
+
+            .ibexa-field-edit-preview__file-name {
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+        }
     }
 }
diff --git a/src/bundle/Resources/public/scss/fieldType/edit/_ezgmaplocation.scss b/src/bundle/Resources/public/scss/fieldType/edit/_ezgmaplocation.scss
@@ -10,6 +10,14 @@
             border-bottom-left-radius: $ibexa-border-radius;
         }
 
+        &__field--address {
+            .ibexa-input {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+                padding-left: calculateRem(48px);
+            }
+        }
+
         &__coordinates {
             display: flex;
             justify-content: space-between;
@@ -32,10 +40,7 @@
             padding: calculateRem(24px);
 
             .ibexa-input {
-                border-top-right-radius: 0;
-                border-bottom-right-radius: 0;
                 margin-bottom: 0;
-                padding-left: calculateRem(48px);
             }
         }
 

diff --git a/src/bundle/Resources/public/scss/fieldType/edit/_ezinteger.scss b/src/bundle/Resources/public/scss/fieldType/edit/_ezinteger.scss
@@ -1,9 +1,4 @@
 .ibexa-field-edit--ezinteger {
-    .ibexa-input-text-wrapper--type-number {
-        width: calculateRem(100px);
-        height: calculateRem(48px);
-    }
-
     .ibexa-data-source__input {
         &::-webkit-inner-spin-button {
             margin-left: calculateRem(24px);

diff --git a/src/bundle/Resources/public/scss/fieldType/edit/_ezmedia.scss b/src/bundle/Resources/public/scss/fieldType/edit/_ezmedia.scss
@@ -42,8 +42,6 @@
 
         &__dimensions {
             input[type='number'] {
-                width: 10ch;
-
                 &.is-invalid {
                     @include input-invalid;