fix: use background to fix border issues between the elements (#1068)

This commit is contained in:
Stefan Dej 2022-09-11 18:46:58 +02:00 committed by GitHub
parent 4e8b6de72a
commit 175a90aae5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -141,120 +141,114 @@
ghost-class="ghost" ghost-class="ghost"
group="macros" group="macros"
@change="updateMacroOrder"> @change="updateMacroOrder">
<template v-for="(macro, index) in editGroupMacros"> <v-row
<div :key="macro.name"> v-for="(macro, index) in editGroupMacros"
<v-row> :key="macro.name"
<v-col class="col-auto pr-0 d-flex"> class="dragable-item my-2 mx-0">
<v-icon class="handle">{{ mdiDragVertical }}</v-icon> <v-col class="col-auto pr-0 d-flex py-2">
</v-col> <v-icon class="handle">{{ mdiDragVertical }}</v-icon>
<v-col> </v-col>
<settings-row <v-col class="py-2">
:key="'groupMacro_macro_' + index" <settings-row
:title="macro.name" :key="'groupMacro_macro_' + index"
:sub-title="getMacroDescription(macro.name)" :title="macro.name"
:dynamic-slot-width="true"> :sub-title="getMacroDescription(macro.name)"
<template v-if="existsMacro(macro.name)"> :dynamic-slot-width="true">
<v-tooltip top> <template v-if="existsMacro(macro.name)">
<template #activator="{ on, attrs }"> <v-tooltip top>
<v-btn <template #activator="{ on, attrs }">
small <v-btn
outlined small
v-bind="attrs" outlined
class="ml-3 minwidth-0 px-2" v-bind="attrs"
:color="macro.color" class="ml-3 minwidth-0 px-2"
v-on="on" :color="macro.color"
@click="changeColorMacroFromGroup(macro)"> v-on="on"
<v-icon small left>{{ mdiPalette }}</v-icon> @click="changeColorMacroFromGroup(macro)">
{{ macro.color }} <v-icon small left>{{ mdiPalette }}</v-icon>
</v-btn> {{ macro.color }}
</template> </v-btn>
<span>{{ $t('Settings.MacrosTab.ChangeMacroColor') }}</span>
</v-tooltip>
<v-tooltip top>
<template #activator="{ on, attrs }">
<v-btn
small
outlined
v-bind="attrs"
class="ml-3 minwidth-0 px-2"
:color="macro.showInStandby ? '' : 'secondary'"
v-on="on"
@click="
updateMacroFromGroup(
macro,
'showInStandby',
!macro.showInStandby
)
">
<v-icon small>{{ mdiSleep }}</v-icon>
</v-btn>
</template>
<span>{{ $t('Settings.MacrosTab.ShowInStateStandby') }}</span>
</v-tooltip>
<v-tooltip top>
<template #activator="{ on, attrs }">
<v-btn
small
outlined
v-bind="attrs"
class="ml-3 minwidth-0 px-2"
:color="macro.showInPause ? '' : 'secondary'"
v-on="on"
@click="
updateMacroFromGroup(
macro,
'showInPause',
!macro.showInPause
)
">
<v-icon small>{{ mdiPause }}</v-icon>
</v-btn>
</template>
<span>{{ $t('Settings.MacrosTab.ShowInStatePaused') }}</span>
</v-tooltip>
<v-tooltip top>
<template #activator="{ on, attrs }">
<v-btn
small
outlined
v-bind="attrs"
class="ml-3 minwidth-0 px-2"
:color="macro.showInPrinting ? '' : 'secondary'"
v-on="on"
@click="
updateMacroFromGroup(
macro,
'showInPrinting',
!macro.showInPrinting
)
">
<v-icon small>{{ mdiPrinter3dNozzle }}</v-icon>
</v-btn>
</template>
<span>{{ $t('Settings.MacrosTab.ShowInStatePrinting') }}</span>
</v-tooltip>
</template> </template>
<v-tooltip top> <span>{{ $t('Settings.MacrosTab.ChangeMacroColor') }}</span>
<template #activator="{ on, attrs }"> </v-tooltip>
<v-btn <v-tooltip top>
small <template #activator="{ on, attrs }">
outlined <v-btn
v-bind="attrs" small
class="ml-3 minwidth-0 px-2" outlined
color="error" v-bind="attrs"
v-on="on" class="ml-3 minwidth-0 px-2"
@click="removeMacroFromGroup(macro)"> :color="macro.showInStandby ? '' : 'secondary'"
<v-icon small>{{ mdiDelete }}</v-icon> v-on="on"
</v-btn> @click="
</template> updateMacroFromGroup(
<span>{{ $t('Settings.MacrosTab.DeleteMacroFromGroup') }}</span> macro,
</v-tooltip> 'showInStandby',
</settings-row> !macro.showInStandby
</v-col> )
</v-row> ">
<v-divider class="my-2"></v-divider> <v-icon small>{{ mdiSleep }}</v-icon>
</div> </v-btn>
</template> </template>
<span>{{ $t('Settings.MacrosTab.ShowInStateStandby') }}</span>
</v-tooltip>
<v-tooltip top>
<template #activator="{ on, attrs }">
<v-btn
small
outlined
v-bind="attrs"
class="ml-3 minwidth-0 px-2"
:color="macro.showInPause ? '' : 'secondary'"
v-on="on"
@click="
updateMacroFromGroup(macro, 'showInPause', !macro.showInPause)
">
<v-icon small>{{ mdiPause }}</v-icon>
</v-btn>
</template>
<span>{{ $t('Settings.MacrosTab.ShowInStatePaused') }}</span>
</v-tooltip>
<v-tooltip top>
<template #activator="{ on, attrs }">
<v-btn
small
outlined
v-bind="attrs"
class="ml-3 minwidth-0 px-2"
:color="macro.showInPrinting ? '' : 'secondary'"
v-on="on"
@click="
updateMacroFromGroup(
macro,
'showInPrinting',
!macro.showInPrinting
)
">
<v-icon small>{{ mdiPrinter3dNozzle }}</v-icon>
</v-btn>
</template>
<span>{{ $t('Settings.MacrosTab.ShowInStatePrinting') }}</span>
</v-tooltip>
</template>
<v-tooltip top>
<template #activator="{ on, attrs }">
<v-btn
small
outlined
v-bind="attrs"
class="ml-3 minwidth-0 px-2"
color="error"
v-on="on"
@click="removeMacroFromGroup(macro)">
<v-icon small>{{ mdiDelete }}</v-icon>
</v-btn>
</template>
<span>{{ $t('Settings.MacrosTab.DeleteMacroFromGroup') }}</span>
</v-tooltip>
</settings-row>
</v-col>
</v-row>
</draggable> </draggable>
</template> </template>
<template v-else> <template v-else>
@ -553,3 +547,9 @@ export default class SettingsMacrosTabExpert extends Mixins(BaseMixin) {
} }
} }
</script> </script>
<style scoped>
.dragable-item {
background-color: #282828;
}
</style>