Commit 100dfce6 authored by christianrhansen's avatar christianrhansen

setup image size checkbox

parent 3cca0cb2
Pipeline #59502 passed with stage
in 6 minutes and 45 seconds
<template lang="pug">
div
.bg-grey-9.q-pa-md
.q-caption.text-grey-6.q-mb-sm Image position
.text-center
template(v-for="(position, index) in css.backgroundPositions")
q-btn.q-ma-xs(@click="setStyle(position)", round, size="sm", flat,
:class="[updatedCell && position === updatedCell.stylesheet.value ? 'bg-blue' : 'bg-grey-8']")
br(v-if="index === 2 || index === 5")
//--------------------------------------------------------------------------------------------------- image position
q-item.q-pa-none(style="border-bottom: 1px solid rgba(255,255,255,0.04);")
q-item-main.q-pa-md.bg-grey-9(style="border-radius: .15rem;")
q-tooltip.z-max.shadow-6.bg-grey-9(anchor="center left", self="center right", :offset="[8, 0]",
style="border: 1px solid rgba(255,255,255,0.1);") Set image position in cell
q-item-tile.q-caption.text-grey-6.q-mb-sm Image position
q-item-tile.text-center
template(v-for="(position, index) in css.backgroundPositions")
q-btn.q-ma-xs(@click="setStyle(position)", round, size="sm", flat,
:class="[updatedCell && position === updatedCell.stylesheet.value ? 'bg-blue' : 'bg-grey-8']")
br(v-if="index === 2 || index === 5")
//------------------------------------------------------------------------------------------------------- image size
q-item.q-pa-none(style="border-bottom: 1px solid rgba(255,255,255,0.04);")
q-item-main.bg-grey-9.q-py-sm(style="border-radius: .15rem;")
q-tooltip.z-max.shadow-6.bg-grey-9(anchor="center left", self="center right", :offset="[8, 0]",
style="border: 1px solid rgba(255,255,255,0.1);") Fit image to cell
q-item-tile.q-px-md
q-checkbox.full-width.q-py-sm(
dark,
v-model="model.backgroundSize",
label="Fit image to cell",
@input="value => handleItemChanged(value)")
</template>
<script>
......@@ -17,7 +40,8 @@
return {
updatedCell: {stylesheet: {value: undefined}},
model: {
backgroundPosition: undefined
backgroundPosition: undefined,
backgroundSize: false
},
css: {
backgroundPositions: ['bg-top-left', 'bg-top', 'bg-top-right', 'bg-left', 'bg-center', 'bg-right', 'bg-bottom-left', 'bg-bottom', 'bg-bottom-right']
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment