UTKFloatStepper 추가. UTKFloatPropertyItem, UTKFloatPropertyItemView에 추가

This commit is contained in:
logonkhi
2026-02-09 20:28:09 +09:00
parent a38efd756e
commit 97bbb789ed
65 changed files with 2785 additions and 131 deletions

View File

@@ -64,7 +64,6 @@
font-size: var(--font-size-body2);
color: var(--color-text-primary);
-unity-text-align: middle-center;
margin-top: 2px;
}
/* ===================================

View File

@@ -26,6 +26,7 @@
font-size: var(--font-size-body2);
color: var(--color-text-primary);
-unity-font-style: normal;
display: none;
}
/* ===================================

View File

@@ -26,6 +26,7 @@
font-size: var(--font-size-body2);
color: var(--color-text-primary);
-unity-font-style: normal;
display: none;
}
/* ===================================

View File

@@ -0,0 +1,156 @@
/*
* ===================================
* UTKFloatStepper.uss
* Float Stepper Component Styles
* ===================================
*/
/* ===================================
Root Container
=================================== */
.utk-number-stepper {
flex-direction: row;
align-items: stretch;
height: var(--size-input-height);
}
/* ===================================
Text Input Field
=================================== */
.utk-number-stepper__input {
flex-grow: 1;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
font-size: var(--font-size-body2);
}
.utk-number-stepper__text-input {
flex-grow: 1;
background-color: var(--color-bg-input);
color: var(--color-text-primary);
--unity-cursor-color: var(--color-text-primary);
border-top-left-radius: var(--radius-s);
border-bottom-left-radius: var(--radius-s);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-width: var(--border-width);
border-bottom-width: var(--border-width);
border-left-width: var(--border-width);
border-right-width: 0;
border-top-color: var(--color-border);
border-bottom-color: var(--color-border);
border-left-color: var(--color-border);
padding-top: 0;
padding-bottom: 0;
padding-left: var(--space-m);
padding-right: var(--space-m);
margin: 0;
-unity-text-align: middle-right;
}
/* ===================================
Button Container
=================================== */
.utk-number-stepper__buttons {
flex-direction: column;
width: 16px;
}
/* ===================================
Stepper Buttons (Base)
=================================== */
.utk-number-stepper__btn {
flex-grow: 1;
width: 16px;
font-size: 6px;
padding: 0;
margin: 0;
background-color: var(--color-btn-normal);
color: var(--color-text-secondary);
border-top-width: var(--border-width);
border-left-width: 0;
border-right-width: var(--border-width);
border-top-color: var(--color-border);
border-right-color: var(--color-border);
border-bottom-color: var(--color-border);
transition-duration: var(--anim-fast);
transition-property: background-color, color;
height: 12px;
}
.utk-number-stepper__btn:hover {
background-color: var(--color-btn-hover);
color: var(--color-text-primary);
}
.utk-number-stepper__btn:active {
background-color: var(--color-btn-pressed);
}
/* ===================================
Up Button
=================================== */
.utk-number-stepper__btn--up {
border-bottom-width: 0;
border-top-left-radius: 0;
border-top-right-radius: var(--radius-s);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/* ===================================
Down Button
=================================== */
.utk-number-stepper__btn--down {
border-bottom-width: var(--border-width);
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: var(--radius-s);
}
/* ===================================
Disabled State
=================================== */
.utk-number-stepper--disabled {
cursor: arrow;
}
.utk-number-stepper--disabled .utk-number-stepper__text-input {
background-color: var(--color-btn-disabled);
color: var(--color-text-disabled);
cursor: arrow;
}
.utk-number-stepper--disabled .utk-number-stepper__text-input:hover {
border-color: var(--color-border);
}
.utk-number-stepper--disabled .utk-number-stepper__btn {
background-color: var(--color-btn-disabled);
color: var(--color-text-disabled);
cursor: arrow;
}
.utk-number-stepper--disabled .utk-number-stepper__btn:hover {
background-color: var(--color-btn-disabled);
color: var(--color-text-disabled);
}
.utk-number-stepper--disabled .utk-number-stepper__btn:active {
background-color: var(--color-btn-disabled);
}

View File

@@ -0,0 +1,11 @@
fileFormatVersion: 2
guid: 53011be3e472c5d46a86079c477e8848
ScriptedImporter:
internalIDToNameTable: []
externalObjects: {}
serializedVersion: 2
userData:
assetBundleName:
assetBundleVariant:
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
disableValidation: 0

View File

@@ -1,6 +1,6 @@
/*
* ===================================
* UTKNumberStepper.uss
* UTKIntStepper.uss
* Number Stepper Component Styles
* ===================================
*/

View File

@@ -0,0 +1,8 @@
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xmlns:utk="UVC.UIToolkit">
<ui:VisualElement name="container" class="utk-property-item-view-container">
<utk:UTKLabel name="label" text="Label" class="utk-property-item-view__label" />
<ui:VisualElement name="value-container" class="utk-property-item-view__value">
<utk:UTKButton name="button-field" class="utk-property-item-view__button" />
</ui:VisualElement>
</ui:VisualElement>
</ui:UXML>

View File

@@ -0,0 +1,10 @@
fileFormatVersion: 2
guid: d9772db144ccd284ea63c1b71dae6711
ScriptedImporter:
internalIDToNameTable: []
externalObjects: {}
serializedVersion: 2
userData:
assetBundleName:
assetBundleVariant:
script: {fileID: 13804, guid: 0000000000000000e000000000000000, type: 0}

View File

@@ -0,0 +1,23 @@
/*
* UTKButtonItemViewUss.uss
* Button PropertyItem View 전용 스타일
*/
.utk-property-item-view--button {
/* Button View 전용 스타일 */
}
.utk-property-item-view--button .utk-property-item-view__button {
flex-grow: 1;
margin-left: 0;
margin-right: 0;
}
/* 라벨이 없는 경우 - 버튼이 전체 너비 사용 */
.utk-property-item-view--button-no-label .utk-property-item-view__label {
display: none;
}
.utk-property-item-view--button-no-label .utk-property-item-view__value {
flex-grow: 1;
}

View File

@@ -0,0 +1,11 @@
fileFormatVersion: 2
guid: 98488360e849b8c4b91bba3629e93b50
ScriptedImporter:
internalIDToNameTable: []
externalObjects: {}
serializedVersion: 2
userData:
assetBundleName:
assetBundleVariant:
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
disableValidation: 0

View File

@@ -18,7 +18,7 @@
border-radius: 4px;
border-width: 1px;
border-color: rgba(255, 255, 255, 0.2);
margin-right: 4px;
margin-right: 0;
}
.utk-property-item-view--color-state .utk-property-item-view__picker-btn {

View File

@@ -12,3 +12,9 @@
margin-left: 0;
margin-right: 0;
}
#readonly-field {
flex-grow: 1;
margin-left: 0;
margin-right: 0;
}

View File

@@ -12,3 +12,9 @@
margin-left: 0;
margin-right: 0;
}
#readonly-field {
flex-grow: 1;
margin-left: 0;
margin-right: 0;
}

View File

@@ -24,14 +24,27 @@
flex-grow: 1;
}
.utk-property-item-view--float .utk-property-item-view__stepper {
display: flex;
flex-grow: 1;
margin-left: 0;
}
/* UseSlider 상태: Slider + Field 모두 표시 */
.utk-property-item-view--float.utk-property-item-view--slider .utk-property-item-view__slider {
display: flex;
flex-grow: 1;
}
.utk-property-item-view--float.utk-property-item-view--slider .utk-property-item-view__field {
flex-grow: 0;
min-width: 60px;
flex-grow: 0.25;
}
.utk-property-item-view--float.utk-property-item-view--slider .utk-property-item-view__stepper {
flex-grow: 0.25;
width: 50px;
}
/* ReadOnly 상태: Slider 숨김 */

View File

@@ -10,6 +10,7 @@
.utk-property-item-view--int .utk-property-item-view__value {
flex-direction: row;
flex-grow: 1;
align-items: center;
}
/* 기본 상태: Slider, Stepper 숨김, Field만 표시 */
@@ -17,6 +18,7 @@
display: none;
flex-grow: 1;
margin-right: 8px;
margin-left: 0;
}
.utk-property-item-view--int .utk-property-item-view__stepper {
@@ -27,16 +29,17 @@
.utk-property-item-view--int .utk-property-item-view__field {
display: flex;
flex-grow: 1;
margin-bottom: 0;
}
/* UseSlider 상태: Slider + Field 모두 표시, Stepper 숨김 */
.utk-property-item-view--int.utk-property-item-view--slider .utk-property-item-view__slider {
display: flex;
flex-grow: 1;
}
.utk-property-item-view--int.utk-property-item-view--slider .utk-property-item-view__field {
flex-grow: 0;
min-width: 60px;
.utk-property-item-view--int.utk-property-item-view--slider .utk-property-item-view__field {
flex-grow: 0.25;
}
.utk-property-item-view--int.utk-property-item-view--slider .utk-property-item-view__stepper {
@@ -46,6 +49,8 @@
/* UseStepper 상태: Stepper만 표시, Field/Slider 숨김 */
.utk-property-item-view--int.utk-property-item-view--stepper .utk-property-item-view__stepper {
display: flex;
flex-grow: 1;
margin-left: 0;
}
.utk-property-item-view--int.utk-property-item-view--stepper .utk-property-item-view__field {
@@ -59,10 +64,13 @@
/* UseSlider + UseStepper 상태: Slider + Stepper 모두 표시, Field 숨김 */
.utk-property-item-view--int.utk-property-item-view--slider.utk-property-item-view--stepper .utk-property-item-view__slider {
display: flex;
flex-grow: 1;
}
.utk-property-item-view--int.utk-property-item-view--slider.utk-property-item-view--stepper .utk-property-item-view__stepper {
display: flex;
display: flex;
flex-grow: 0.25;
width: 50px;
}
.utk-property-item-view--int.utk-property-item-view--slider.utk-property-item-view--stepper .utk-property-item-view__field {
@@ -81,4 +89,5 @@
.utk-property-item-view--int.utk-property-item-view--readonly .utk-property-item-view__field {
display: flex;
flex-grow: 1;
margin-bottom: 0;
}

View File

@@ -4,10 +4,10 @@
<utk:UTKLabel name="label" text="Label" class="utk-property-item-view__label" />
<ui:VisualElement name="value-container" class="utk-property-item-view__value">
<utk:UTKIntegerField name="min-field" class="utk-property-item-view__field" />
<utk:UTKNumberStepper name="min-stepper" class="utk-property-item-view__stepper" />
<utk:UTKIntStepper name="min-stepper" class="utk-property-item-view__stepper" />
<utk:UTKLabel text="~" class="utk-property-item-view__range-separator" />
<utk:UTKIntegerField name="max-field" class="utk-property-item-view__field" />
<utk:UTKNumberStepper name="max-stepper" class="utk-property-item-view__stepper" />
<utk:UTKIntStepper name="max-stepper" class="utk-property-item-view__stepper" />
</ui:VisualElement>
</ui:VisualElement>
</ui:UXML>

View File

@@ -17,6 +17,7 @@
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
margin-left: 0;
}
.utk-property-item-view--int-range .utk-property-item-view__range-separator {

View File

@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:utk="UVC.UIToolkit">
<ui:VisualElement name="container" class="utk-property-item-view-container">
<utk:UTKLabel name="label" text="Label" class="utk-property-item-view__label" />
<ui:VisualElement name="value-container" class="utk-property-item-view__value">
<utk:UTKMultiSelectDropdown name="multiselect-dropdown-field" class="utk-property-item-view__multiselect-dropdown" />
</ui:VisualElement>
</ui:VisualElement>
</ui:UXML>

View File

@@ -0,0 +1,10 @@
fileFormatVersion: 2
guid: a7bd219f87024f5448d8a67d962d52bf
ScriptedImporter:
internalIDToNameTable: []
externalObjects: {}
serializedVersion: 2
userData:
assetBundleName:
assetBundleVariant:
script: {fileID: 13804, guid: 0000000000000000e000000000000000, type: 0}

View File

@@ -0,0 +1,20 @@
/*
* UTKMultiSelectDropdownPropertyItemViewUss.uss
* MultiSelectDropdown PropertyItem View 전용 스타일
*/
.utk-property-item-view--multiselect-dropdown {
/* MultiSelectDropdown View 전용 스타일 */
}
.utk-property-item-view--multiselect-dropdown .utk-property-item-view__multiselect-dropdown {
flex-grow: 1;
margin-left: 0;
margin-right: 0;
}
#readonly-field {
flex-grow: 1;
margin-left: 0;
margin-right: 0;
}

View File

@@ -0,0 +1,11 @@
fileFormatVersion: 2
guid: ff5637017b4f4ba499070014ab8ba603
ScriptedImporter:
internalIDToNameTable: []
externalObjects: {}
serializedVersion: 2
userData:
assetBundleName:
assetBundleVariant:
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
disableValidation: 0

View File

@@ -26,12 +26,13 @@
border-bottom-color: var(--color-border);
}
.utk-property-item-view:hover {
/* .utk-property-item-view:hover {
background-color: var(--color-collection-item-hover);
}
} */
.utk-property-item-view TemplateContainer {
flex-grow: 1;
min-height: 28px;
}
/* ===================================
@@ -82,6 +83,8 @@
white-space: nowrap;
-unity-text-align: middle-left;
padding-right: 10px;
align-items: center;
justify-content: center;
}
/* ===================================
@@ -92,6 +95,7 @@
flex-grow: 1;
flex-direction: row;
align-items: stretch;
align-self: center;
}
/* ===================================
@@ -344,3 +348,61 @@
color: var(--color-text-secondary);
margin-top: var(--space-xs);
}
/* ===================================
라벨 없는 상태 (ShowLabel=false)
=================================== */
.utk-property-item-view--no-label .utk-property-item-view__label {
display: none;
}
.utk-property-item-view--no-label .utk-property-item-view__value {
flex-grow: 1;
}
/* ===================================
Stepper 스타일 (Float용)
=================================== */
.utk-property-item-view__stepper {
flex-direction: column;
margin-left: 4px;
flex-shrink: 0;
}
.utk-property-item-view__stepper-btn {
width: 16px;
height: 11px;
min-height: 11px;
padding: 0;
margin: 0;
background-color: var(--color-btn-normal);
border-width: var(--border-width);
border-color: var(--color-border);
font-size: 10px;
-unity-text-align: middle-center;
}
.utk-property-item-view__stepper-btn:hover {
background-color: var(--color-btn-hover);
}
.utk-property-item-view__stepper-btn:active {
background-color: var(--color-btn-active);
}
.utk-property-item-view__stepper-btn--up {
border-top-left-radius: var(--radius-s);
border-top-right-radius: var(--radius-s);
border-bottom-width: 0;
}
.utk-property-item-view__stepper-btn--down {
border-bottom-left-radius: var(--radius-s);
border-bottom-right-radius: var(--radius-s);
}
.utk-property-item-view__field--with-stepper {
flex-grow: 1;
}

View File

@@ -16,3 +16,9 @@
.utk-property-item-view--radio .utk-property-item-view__radio {
margin-right: 12px;
}
#readonly-field {
flex-grow: 1;
margin-left: 0;
margin-right: 0;
}

View File

@@ -10,3 +10,18 @@
.utk-property-item-view--string .utk-property-item-view__field {
flex-grow: 1;
}
/* ActionButton 스타일 */
.utk-property-item-view--string .utk-property-item-view__action-button {
margin-left: 4px;
flex-shrink: 0;
height: 24px;
}
.utk-property-item-view--string .utk-property-item-view__action-button-icon {
margin-left: 4px;
flex-shrink: 0;
min-width: 24px;
max-width: 24px;
height: 24px;
}

View File

@@ -1,6 +1,6 @@
/*
* ===================================
* UTKNumberStepperSample.uss
* UTKIntStepperSample.uss
* Number Stepper Sample Specific Styles
* ===================================
*/

View File

@@ -1,7 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<UXML xmlns="UnityEngine.UIElements" xmlns:utk="UVC.UIToolkit">
<Style src="../UTKSampleCommon.uss" />
<Style src="UTKNumberStepperSample.uss" />
<Style src="UTKIntStepperSample.uss" />
<VisualElement class="utk-sample-container">
<Label class="utk-sample-desc" text="숫자 스테퍼 컴포넌트 (증감 버튼 포함)" />
@@ -10,7 +10,7 @@
<VisualElement class="utk-sample-section">
<Label class="utk-sample-section__title" text="Step 1" />
<VisualElement class="utk-sample-row">
<utk:UTKNumberStepper name="stepper-step1" min-value="0" max-value="100" value="50" step="1" class="utk-sample-stepper" />
<utk:UTKIntStepper name="stepper-step1" min-value="0" max-value="100" value="50" step="1" class="utk-sample-stepper" />
</VisualElement>
</VisualElement>
@@ -18,7 +18,7 @@
<VisualElement class="utk-sample-section">
<Label class="utk-sample-section__title" text="Step 5" />
<VisualElement class="utk-sample-row">
<utk:UTKNumberStepper name="stepper-step5" min-value="0" max-value="100" value="25" step="5" class="utk-sample-stepper" />
<utk:UTKIntStepper name="stepper-step5" min-value="0" max-value="100" value="25" step="5" class="utk-sample-stepper" />
</VisualElement>
</VisualElement>
@@ -26,7 +26,7 @@
<VisualElement class="utk-sample-section">
<Label class="utk-sample-section__title" text="Wrap Around" />
<VisualElement class="utk-sample-row">
<utk:UTKNumberStepper name="stepper-wrap" min-value="0" max-value="100" value="0" step="10" wrap-around="true" class="utk-sample-stepper" />
<utk:UTKIntStepper name="stepper-wrap" min-value="0" max-value="100" value="0" step="10" wrap-around="true" class="utk-sample-stepper" />
</VisualElement>
</VisualElement>

View File

@@ -261,8 +261,9 @@ Textfield 항목 스타일
height: 24px;
width: auto;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-left: 0;
-unity-font-definition: resource('Fonts/Pretendard/Pretendard-Medium');
/* --unity-selection-color: rgba(54, 98, 160, 0.651); 선택 색상 */
--unity-cursor-color: var(--color-base-01); /* 캐럿(커서) 색상 흰색 */