Files
pixel.horse/src/ts/components/shared/actions-modal/actions-modal.pug
T
2019-09-02 11:37:22 -04:00

103 lines
5.0 KiB
Plaintext

.modal-header.d-none.d-sm-block.d-none-for-low-height
h4.modal-title(labelledBy=".modal")
| Actions
.modal-body.modal-checkboxes
tabset.fixed-height(
type="pills" saveActiveTab="testing-save-tab" [destroyOnHide]="false"
(activeIndexChange)="tabIndex = $event")
tab(title="Actions" [icon]="actionsIcon")
.action-columns(*tabContent)
.d-flex.align-items-center.mb-2(*ngFor="let a of actions")
action-button.mb-0.mr-2([draggableItem]="a" [action]="a" [shadow]="false")
b {{a.title}}
tab(title="Expressions" [icon]="expressionsIcon")
div(*tabContent)
.d-flex.mb-3
action-button.mb-0.mr-sm-4(
[draggableItem]="emoteAction" [action]="emoteAction" [shadow]="false" (draggableDrop)="drop($event)")
.sub-tabset.nav.nav-pills.mb-0
button.btn-unstyled.nav-link([class.active]="activeTab === 'right-eye'" (click)="activeTab = 'right-eye'") Right eye
button.btn-unstyled.nav-link([class.active]="activeTab === 'left-eye'" (click)="activeTab = 'left-eye'") Left eye
button.btn-unstyled.nav-link([class.active]="activeTab === 'mouth'" (click)="activeTab = 'mouth'") Mouth
button.btn-unstyled.nav-link([class.active]="activeTab === 'extra'" (click)="activeTab = 'extra'") Extra
.fixed-height-tabset
div([class.inactive-tab]="activeTab !== 'right-eye'")
sprite-selection(
[(selected)]="eyeRight" [sprites]="eyesRight" [fill]="eyeColor"
[circle]="coatFill" [reverseExtra]="true" [skip]="1"
[invisible]="tabIndex !== 1 || activeTab !== 'right-eye'"
(selectedChange)="changed(lockEyes)")
div([class.inactive-tab]="activeTab !== 'left-eye'")
custom-checkbox.mb-2([(checked)]="lockEyes" (checkedChange)="changed($event)")
| Use the same as right one
sprite-selection(
[(selected)]="eyeLeft" [sprites]="eyesLeft" [fill]="eyeColor" [disabled]="lockEyes"
[circle]="coatFill" [reverseExtra]="true" [skip]="1"
[invisible]="tabIndex !== 1 || activeTab !== 'left-eye'"
(selectedChange)="changed(lockEyes)")
div([class.inactive-tab]="activeTab !== 'mouth'")
sprite-selection#expression-selection(
[(selected)]="muzzle" [sprites]="muzzles" [fill]="noseFills"
[outline]="noseOutlines" [circle]="coatFill"
[invisible]="tabIndex !== 1 || activeTab !== 'mouth'"
(selectedChange)="changed(lockEyes)")
div([class.inactive-tab]="activeTab !== 'extra'")
sprite-selection.mb-2(
[(selected)]="irisRight" [sprites]="irisesRight" [fill]="eyeColor"
[invisible]="tabIndex !== 1 || activeTab !== 'extra'"
[circle]="coatFill" [reverseExtra]="true" (selectedChange)="changed(lockEyes)")
custom-checkbox([(checked)]="lockIrises" (checkedChange)="changed(lockEyes)")
| Use the same as right one
sprite-selection.mt-2(
[(selected)]="irisLeft" [sprites]="irisesLeft" [fill]="eyeColor" [disabled]="lockIrises"
[invisible]="tabIndex !== 1 || activeTab !== 'extra'"
[circle]="coatFill" [reverseExtra]="true" (selectedChange)="changed(lockEyes)")
.d-flex.flex-wrap.mt-3
label.text-muted.mr-3 Other options
custom-checkbox([(checked)]="blush" (checkedChange)="changed(lockEyes)") Blush
custom-checkbox.ml-4([(checked)]="sleeping" (checkedChange)="changed(lockEyes)") Sleeping
custom-checkbox.ml-4([(checked)]="tears" (checkedChange)="changed(lockEyes)") Tears
custom-checkbox.ml-4([(checked)]="crying" (checkedChange)="changed(lockEyes)") Crying
custom-checkbox.ml-4([(checked)]="hearts" (checkedChange)="changed(lockEyes)") Hearts
tab(title="Chat" [icon]="chatIcon")
.action-columns(*tabContent)
.d-flex.align-items-center.mb-2(*ngFor="let a of commands")
action-button.mb-0.mr-2([draggableItem]="a" [action]="a" [shadow]="false")
b {{a.title}}
tab(title="Options" [icon]="optionsIcon")
div(*tabContent)
button.btn.btn-outline-secondary.mr-2.mb-2((click)="resetToDefault()")
| Reset to default actions
button.btn.btn-outline-secondary.mr-2.mb-2((click)="clearActionBar()")
| Clear action bar
button.btn.btn-outline-secondary.mr-2.mb-2((click)="undo()")
| Undo
button.btn.btn-outline-secondary.mr-2.mb-2((click)="export()")
| Export actions
button.btn.btn-outline-secondary.mr-2.mb-2((click)="importFile.click()")
| Import actions
input.d-none(#importFile type="file" (change)="import(importFile.files[0])")
tab(*ngIf="dev" title="Dev" [icon]="devIcon")
div(*tabContent)
.d-flex.mb-3
action-button.mb-0.mr-4(
[draggableItem]="entityAction" [action]="entityAction" [shadow]="false" (draggableDrop)="drop($event)")
input.form-control(
placeholder="entity name" [(ngModel)]="entityName" (ngModelChange)="updateEntity()" style="max-width: 200px;")
.d-flex.flex-wrap(style="height: 250px; overflow-y: scroll")
action-button(*ngFor="let a of entityActions" [draggableItem]="a" [action]="a")
.modal-footer.d-flex
.flex-grow-1
em.text-muted Drag actions to the action bar
button.btn.btn-outline-secondary((click)="ok()")
| Close