mns/mns-mini-zabor
mns
/
mns-mini-zabor
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dev #84

Merged
ksenia_mikhailova merged 141 commits from dev into main 2024-10-03 15:30:24 +03:00
Conversation 0 Commits 141 Files Changed 62 +33 -37
3 changed files with 33 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 988b490d87 - Show all commits

4
assets/main.scss
View File

@ -364,10 +364,10 @@ button {
@apply flex items-center justify-between;
>div {
@apply h-10 overflow-hidden rounded border-gray-300 shadow inline-block leading-none grow;
@apply h-10 overflow-hidden rounded border-gray-300 shadow flex leading-none grow justify-center items-center px-4;
span {
@apply flex select-none w-full h-full justify-center items-center;
@apply grow text-center;
}
}

35
components/calc/values.vue
View File

@ -59,9 +59,6 @@ const form_refs = {
total_length: ref(),
}
const lamelle_text = ref(contrastColor(lamelle_color.value))
const pillar_text = ref(contrastColor(pillar_color.value))
const changeParametres = () => {
// console.log('form', form_state.total_length * 1000, 'copy', copy_form_state.total_length * 1000)
@ -138,11 +135,9 @@ const changeParametres = () => {
const setLamelleColor = (color: ralTypes) => {
lamelle_color.value = color;
lamelle_text.value = contrastColor(color) ?? '#000'
}
const setPillarColor = (color: ralTypes) => {
pillar_color.value = color
pillar_text.value = contrastColor(color) ?? '#000'
}
const setPillarPattern = (pattern: patternTypes) => {
pillar_pattern.value = pattern
@ -187,44 +182,26 @@ const calc_table = computed(() => {
<div class="form-row">
<div class="form-item form-item_color">
<label for="lamelle_color">Цвет ламелей</label>
<DropdownPicker type="color" :cb="setLamelleColor" name="lamelle_color"
<DropdownPicker type="color" :cb="setLamelleColor" name="lamelle_color" :color="lamelle_color"
:goto_target="new Vector3(0, lamelles_count * lamelle_height * 0.75, 0)"
:goto_cam="new Vector3(0.75, 0.75, 0.75)">
<span
:style="[{ color: lamelle_text, backgroundColor: getColorHexFromRal(lamelle_color) ?? 'transparent' }]">
{{ getColorNameFromRal(lamelle_color) }}
</span>
</DropdownPicker>
:goto_cam="new Vector3(0.75, 0.75, 0.75)" />
</div>
</div>
<div class="form-row">
<div class="form-item form-item_color">
<label for="pillar_color">Цвет столба</label>
<DropdownPicker type="color" :cb="setPillarColor" name="pillar_color"
<DropdownPicker type="color" :cb="setPillarColor" name="pillar_color" :color="pillar_color"
:goto_target="new Vector3(-fence_section * 0.5, lamelles_count * lamelle_height, 0)"
:goto_cam="new Vector3(-1, -1, 1)">
<span
:style="[{ color: pillar_text, backgroundColor: getColorHexFromRal(pillar_color) ?? 'transparent' }]">
{{ getColorNameFromRal(pillar_color) }}
</span>
</DropdownPicker>
:goto_cam="new Vector3(-1, -1, 1)" />
</div>
</div>
<div class="form-row">
<div class="form-item form-item_color">
<label for="pillar_pattern">Узор столба</label>
<DropdownPicker type="pattern" :cb="setPillarPattern" name="pillar_pattern"
<DropdownPicker type="pattern" :cb="setPillarPattern" name="pillar_pattern" :pattern="pillar_pattern"
:disabled="remove_pillar"
:goto_target="new Vector3(fence_section * 0.5, lamelles_count * lamelle_height, 0)"
:goto_cam="new Vector3(1, 2, -1)">
<span :style="getFilename(pillar_pattern) ? [{
backgroundImage: `url(${getFilename(pillar_pattern)})`,
backgroundSize: 'contain',
color: 'transparent'
}] : []">
{{ pillar_pattern }}
</span>
</DropdownPicker>
:goto_cam="new Vector3(1, 2, -1)"/>
</div>
</div>
</div>

29
components/dropdown/picker.vue
View File

@ -1,5 +1,8 @@
<script setup lang="ts">
const props = defineProps(['cb', 'name', 'type', 'disabled', 'goto_cam', 'goto_target'])
import { getFilename } from '../pattern';
import { getColorHexFromRal, getColorNameFromRal } from '../ral';
const props = defineProps(['cb', 'name', 'color', 'pattern', 'type', 'disabled', 'goto_cam', 'goto_target'])
const goto_cam = use_goto_camera()
const goto_target = use_goto_target()
@ -37,11 +40,27 @@ watch(open_calc, () => {
'picker_disabled': props.disabled,
}]" ref="picker">
<div class="picker-input">
<div @click="toggleOpen(!is_open)">
<slot></slot>
<template v-if="props.type == 'color'">
<div @click="toggleOpen(!is_open)"
:style="[{ color: contrastColor(props.color), backgroundColor: getColorHexFromRal(props.color) ?? 'transparent' }]">
<span>
{{ getColorNameFromRal(props.color) }}
</span>
<Icon class="picker-button" :name="is_open ? 'mdi:chevron-down' : 'mdi:chevron-up'" />
</div>
<Icon class="picker-button" :name="is_open ? 'mdi:chevron-down' : 'mdi:chevron-up'"
@click="toggleOpen(!is_open)" />
</template>
<template v-if="props.type == 'pattern'">
<div @click="toggleOpen(!is_open)" :style="getFilename(props.pattern) ? [{
backgroundImage: `url(${getFilename(props.pattern)})`,
backgroundSize: 'contain',
color: 'transparent'
}] : []">
<span>
{{ props.pattern }}
</span>
<Icon class="picker-button" :name="is_open ? 'mdi:chevron-down' : 'mdi:chevron-up'" />
</div>
</template>
</div>
<div class="picker-changer flex flex-wrap" v-if="is_open">