DeforaNetworks/corteza
DeforaNetworks/corteza
3
0
Fork 0
Code

Fix horizontal field editors/viewers styling impacting other form groups in compose

Browse Source
This commit is contained in:
Jože Fortun 2024-03-06 16:07:49 +01:00
parent 0456fe4f3e
commit 3cfad70631
13 changed files with 43 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/web/compose/src/components/ModuleFields/Editor/DateTime.vue
View File

@ -15,7 +15,7 @@
>
<span
:title="label"
class="d-inline-block mw-100 py-1"
class="d-inline-block mw-100"
>
{{ label }}
</span>

2
client/web/compose/src/components/ModuleFields/Editor/Email.vue
View File

@ -16,7 +16,7 @@
>
<span
:title="label"
class="d-inline-block mw-100 py-1"
class="d-inline-block mw-100"
>
{{ label }}
</span>

2
client/web/compose/src/components/ModuleFields/Editor/File.vue
View File

@ -15,7 +15,7 @@
>
<span
:title="label"
class="d-inline-block mw-100 py-1"
class="d-inline-block mw-100"
>
{{ label }}
</span>

2
client/web/compose/src/components/ModuleFields/Editor/Geometry.vue
View File

@ -16,7 +16,7 @@
>
<span
:title="label"
class="d-inline-block mw-100 py-1"
class="d-inline-block mw-100"
>
{{ label }}
</span>

2
client/web/compose/src/components/ModuleFields/Editor/Number.vue
View File

@ -15,7 +15,7 @@
>
<span
:title="label"
class="d-inline-block mw-100 py-1"
class="d-inline-block mw-100"
>
{{ label }}
</span>

2
client/web/compose/src/components/ModuleFields/Editor/Record.vue
View File

@ -15,7 +15,7 @@
>
<span
:title="label"
class="d-inline-block mw-100 py-1"
class="d-inline-block mw-100"
>
{{ label }}
</span>

2
client/web/compose/src/components/ModuleFields/Editor/Select.vue
View File

@ -15,7 +15,7 @@
>
<span
:title="label"
class="d-inline-block mw-100 py-1"
class="d-inline-block mw-100"
>
{{ label }}
</span>

2
client/web/compose/src/components/ModuleFields/Editor/String.vue
View File

@ -16,7 +16,7 @@
>
<span
:title="label"
class="d-inline-block mw-100 py-1"
class="d-inline-block mw-100"
>
{{ label }}
</span>

2
client/web/compose/src/components/ModuleFields/Editor/Url.vue
View File

@ -15,7 +15,7 @@
>
<span
:title="label"
class="d-inline-block mw-100 py-1"
class="d-inline-block mw-100"
>
{{ label }}
</span>

2
client/web/compose/src/components/ModuleFields/Editor/User.vue
View File

@ -15,7 +15,7 @@
>
<span
:title="label"
class="d-inline-block mw-100 py-1"
class="d-inline-block mw-100"
>
{{ label }}
</span>

33
client/web/compose/src/components/PageBlocks/RecordBase.vue
View File

@ -26,9 +26,9 @@
>
<template #label>
<div
class="d-flex align-items-center text-primary mb-0"
class="d-flex text-primary mb-0"
>
<span class="d-inline-block mw-100 py-1">
<span class="d-inline-block mw-100">
{{ field.label || field.name }}
</span>
@ -63,7 +63,7 @@
<div
v-if="field.canReadRecordValue"
class="value mt-1 align-self-center"
class="value align-self-center"
>
<field-viewer
v-bind="{ ...$props, field }"
@ -333,30 +333,3 @@ export default {
},
}
</script>
<style lang="scss">
.field-container {
legend {
padding-top: 0;
padding-bottom: 0;
}
}
.value {
min-height: 1.2rem;
}
</style>
<style lang="scss" scoped>
.inline-actions {
opacity: 0;
transition: opacity 0.25s;
}
.field-container:hover .inline-actions {
opacity: 1;
button:hover {
color: var(--primary) !important;
}
}
</style>

12
client/web/compose/src/components/PageBlocks/RecordEditor.vue
View File

@ -19,7 +19,7 @@
<div
v-if="canDisplay(field)"
:key="field.id"
class="mb-3"
class="field-container mb-3"
>
<field-editor
v-if="isFieldEditable(field)"
@ -40,7 +40,7 @@
<div
class="d-flex align-items-center text-primary mb-0"
>
<span class="d-inline-block mw-100 py-1">
<span class="d-inline-block mw-100">
{{ field.label || field.name }}
</span>
@ -57,7 +57,7 @@
<div
v-if="field.canReadRecordValue"
class="value mt-1 align-self-center"
class="value align-self-center"
>
<field-viewer
:field="field"
@ -220,9 +220,3 @@ export default {
},
}
</script>
<style lang="scss">
.value {
min-height: 1.2rem;
}
</style>

38
client/web/compose/src/themes/corteza-base/custom.scss
View File

@ -8,16 +8,32 @@
}
}
.col-form-label {
padding: 0;
padding-right: 5px !important;
}
// Styles for field viewers and editors, they're here since they're used in multiple places
.field-container {
.form-row {
margin: 0;
.form-row {
margin: 0;
[class*="col-"] {
padding-right: 0;
padding-left: 0;
[class*="col-"] {
padding: 0;
}
}
}
.value {
min-height: 1.2rem;
}
.inline-actions {
opacity: 0;
transition: opacity 0.25s;
button:hover {
color: var(--primary) !important;
}
}
&:hover {
.inline-actions {
opacity: 1;
}
}
}