Elgato_dark/bunkerweb
1
0
Fork 0
mirror of https://github.com/bunkerity/bunkerweb synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix drop inp with tables

Browse source
This commit is contained in:
Jordan Blasenhauer 2024-06-17 15:08:49 +02:00
parent 4252120e17
commit 0691559f38
11 changed files with 656 additions and 578 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
vuejs/client/input.css
View file

@ -161,7 +161,15 @@ body {
/* INPUT */
.field-container {
@apply relative w-full px-3 md:px-4 pt-3 pb-4;
@apply relative w-full;
}
.setting.field-container {
@apply px-3 md:px-4 pt-3 pb-4;
}
.table.field-container {
@apply p-0 -translate-x-1;
}
.input-header-container {

2
vuejs/client/public/css/style.css
View file

File diff suppressed because one or more lines are too long

14
vuejs/client/src/components/Forms/Field/Combobox.vue
View file

@ -49,7 +49,8 @@ import { v4 as uuidv4 } from "uuid";
@param {array} [requiredValues=[]] - values that need to be selected to be valid, works only if required is true
@param {object} [columns={"pc": "12", "tablet": "12", "mobile": "12}] - Field has a grid system. This allow to get multiple field in the same row if needed.
@param {boolean} [hideLabel=false]
@param {boolean} [onlyDown=false] - If the dropdown should check the bottom of the container
@param {boolean} [onlyDown=false] - If the dropdown should check the bottom of the
@param {boolean} [overflowAttrEl=""] - Attribut to select the container the element has to check for overflow
@param {string} [containerClass=""]
@param {string} [inpClass=""]
@param {string} [headerClass=""]
@ -122,6 +123,11 @@ const props = defineProps({
required: false,
default: "",
},
overflowAttrEl: {
type: String,
required: false,
default: "",
},
headerClass: {
type: String,
required: false,
@ -183,7 +189,9 @@ function toggleSelect() {
// Get field container rect
const fieldContainer = selectBtn.value.closest("[data-field-container]");
const parent = fieldContainer.parentElement;
const parent = props.overflowAttrEl
? fieldContainer.closest(`[${props.overflowAttrEl}]`)
: fieldContainer.parentElement;
// Update position only if parent has overflow
const isOverflow = parent.scrollHeight > parent.clientHeight ? true : false;
if (!isOverflow) return;
@ -203,7 +211,7 @@ function toggleSelect() {
if (!canBeDown) {
selectDropdown.value.style.top = `-${
selectDropRect.height + selectBtnRect.height
selectDropRect.height + selectBtnRect.height - 16
}px`;
}

14
vuejs/client/src/components/Forms/Field/Select.vue
View file

@ -43,6 +43,7 @@ import { v4 as uuidv4 } from "uuid";
@param {object} [columns={"pc": "12", "tablet": "12", "mobile": "12}] - Field has a grid system. This allow to get multiple field in the same row if needed.
@param {boolean} [hideLabel=false]
@param {boolean} [onlyDown=false] - If the dropdown should check the bottom of the container
@param {boolean} [overflowAttrEl=""] - Attribut to select the container the element has to check for overflow
@param {string} [containerClass=""]
@param {string} [inpClass=""]
@param {string} [headerClass=""]
@ -105,6 +106,11 @@ const props = defineProps({
required: false,
default: false,
},
overflowAttrEl: {
type: String,
required: false,
default: "",
},
hideLabel: {
type: Boolean,
required: false,
@ -158,7 +164,9 @@ function toggleSelect() {
if (select.isOpen) {
// Get field container rect
const fieldContainer = selectBtn.value.closest("[data-field-container]");
const parent = fieldContainer.parentElement;
const parent = props.overflowAttrEl
? fieldContainer.closest(`[${props.overflowAttrEl}]`)
: fieldContainer.parentElement;
// Update position only if parent has overflow
const isOverflow = parent.scrollHeight > parent.clientHeight ? true : false;
@ -177,11 +185,9 @@ function toggleSelect() {
? true
: false;
console.log(canBeDown);
if (!canBeDown) {
selectDropdown.value.style.top = `-${
selectDropRect.height + selectBtnRect.height
selectDropRect.height + selectBtnRect.height - 16
}px`;
}

2
vuejs/client/src/components/Widget/Table.vue
View file

@ -149,7 +149,7 @@ onUpdated(() => {
</th>
</tr>
</thead>
<tbody ref="tableBody" class="table-content">
<tbody data-table-body ref="tableBody" class="table-content">
<tr
v-for="rowId in table.rowLength - 1"
role="row"

586
vuejs/client/src/pages/global-config/globalConfig.vue
View file

File diff suppressed because it is too large Load diff

12
vuejs/client/src/pages/test/Test.vue
View file

@ -53,7 +53,7 @@ const tableData = {
"Interval",
"Last run",
"Success",
"Last run time",
"last run date",
"Cache",
],
positions: [2, 2, 1, 1, 1, 3, 2],
@ -531,6 +531,8 @@ const tableData = {
tablet: 12,
mobile: 12,
},
overflowAttrEl: "data-table-body",
containerClass: "table",
popovers: [
{
iconColor: "info",
@ -689,6 +691,8 @@ const tableData = {
tablet: 12,
mobile: 12,
},
overflowAttrEl: "data-table-body",
containerClass: "table",
popovers: [
{
iconColor: "info",
@ -801,6 +805,8 @@ const tableData = {
tablet: 12,
mobile: 12,
},
overflowAttrEl: "data-table-body",
containerClass: "table",
popovers: [
{
iconColor: "info",
@ -867,6 +873,8 @@ const tableData = {
tablet: 12,
mobile: 12,
},
overflowAttrEl: "data-table-body",
containerClass: "table",
popovers: [
{
iconColor: "info",
@ -983,6 +991,8 @@ const tableData = {
tablet: 12,
mobile: 12,
},
overflowAttrEl: "data-table-body",
containerClass: "table",
popovers: [
{
iconColor: "info",

10
vuejs/jobs.json
View file

@ -472,6 +472,8 @@
"tablet": 12,
"mobile": 12
},
"overflowAttrEl": "data-table-body",
"containerClass": "table",
"popovers": [
{
"iconColor": "info",
@ -633,6 +635,8 @@
"tablet": 12,
"mobile": 12
},
"overflowAttrEl": "data-table-body",
"containerClass": "table",
"popovers": [
{
"iconColor": "info",
@ -748,6 +752,8 @@
"tablet": 12,
"mobile": 12
},
"overflowAttrEl": "data-table-body",
"containerClass": "table",
"popovers": [
{
"iconColor": "info",
@ -817,6 +823,8 @@
"tablet": 12,
"mobile": 12
},
"overflowAttrEl": "data-table-body",
"containerClass": "table",
"popovers": [
{
"iconColor": "info",
@ -933,6 +941,8 @@
"tablet": 12,
"mobile": 12
},
"overflowAttrEl": "data-table-body",
"containerClass": "table",
"popovers": [
{
"iconColor": "info",

572
vuejs/plugins.json
View file

File diff suppressed because it is too large Load diff

10
vuejs/test.py
View file

@ -123,7 +123,7 @@ def format_setting(setting_name, setting_value, total_settings, loop_id, templat
Format a setting in ordert to be used with form builder.
"""
# add zindex for container
setting_value["containerClass"] = f"z-{total_settings - loop_id}"
setting_value["containerClass"] = f"z-{total_settings - loop_id} setting"
# regex by pattern
setting_value["pattern"] = setting_value.get("regex", "")
@ -162,10 +162,10 @@ def format_setting(setting_name, setting_value, total_settings, loop_id, templat
popovers = []
if(setting_value.get("disabled", False)) and service_settings[setting_name].get("method", "ui") not in ("ui", "default"):
popovers.append({"iconColor": "red",
"iconName": "trespass",
"text" : "inp_popover_method_disabled"
})
popovers.append({"iconColor": "red",
"iconName": "trespass",
"text" : "inp_popover_method_disabled"
})
if(setting_value.get("context")):
popovers.append({"iconColor": "orange" if setting_value.get("context") == "multisite" else "blue",

2
vuejs/test3.py
View file

@ -48,6 +48,8 @@ def jobs_to_list(jobs):
"tablet": 12,
"mobile": 12,
},
"overflowAttrEl" : "data-table-body",
"containerClass" : "table",
"popovers": [
{
"iconColor": "info",