-
-
- 
+
+
+
diff --git a/src/app/components/shared/select-add/select-add.component.scss b/src/app/components/shared/select-add/select-add.component.scss
index 941da58..9920d6f 100644
--- a/src/app/components/shared/select-add/select-add.component.scss
+++ b/src/app/components/shared/select-add/select-add.component.scss
@@ -19,7 +19,8 @@ $inner-padding: var(--medium-padding);
position: relative;
cursor: pointer;
- p {
+ p,
+ input[type='text'] {
display: inline-block;
@include sub-title-text();
}
@@ -36,7 +37,7 @@ $inner-padding: var(--medium-padding);
.bottom-container {
width: 100%;
- height: 40vh;
+ height: 300px;
position: absolute;
overflow-y: hidden;
@@ -77,6 +78,75 @@ $inner-padding: var(--medium-padding);
cursor: pointer;
}
+
+ .buttons {
+ height: 32px;
+ @media (max-width: $mobile-width) {
+ height: 24px;
+ }
+ position: relative;
+ width: 100%;
+
+ button {
+ margin: 0;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translateY(-50%) translateX(-50%);
+ }
+
+ .edit {
+ position: absolute;
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ margin: 0;
+ opacity: 0.25;
+ cursor: pointer;
+
+ img {
+ @include square(16px);
+ }
+
+ transition: opacity $short-animation-time;
+
+ &:before {
+ content: '';
+ display: block;
+ position: absolute;
+ bottom: calc(-1 * #{$line-height});
+ left: 0;
+ height: $line-height;
+ background-color: $text-color;
+ width: 0;
+ transition: width $long-animation-time;
+ }
+
+ @media (min-width: $mobile-width) {
+ &:hover {
+ opacity: 0.5;
+ }
+ &:hover {
+ &:before {
+ width: 100% !important;
+ }
+ }
+ }
+
+ &.active {
+ &:before {
+ width: 100% !important;
+ }
+ }
+
+ &.active {
+ opacity: 1;
+ }
+ }
+ }
+ }
+
+ .edit {
}
}
diff --git a/src/app/components/shared/select-add/select-add.component.ts b/src/app/components/shared/select-add/select-add.component.ts
index d52f4d3..fb39622 100644
--- a/src/app/components/shared/select-add/select-add.component.ts
+++ b/src/app/components/shared/select-add/select-add.component.ts
@@ -12,6 +12,7 @@ export class SelectAddComponent {
@Input() options: string[];
@Input() alwaysDropShadow = false;
@Input() onlyShadowBorder = false;
+ @Input() editable = false;
@Input() set default(value: string) {
this.selected = value;
@@ -20,7 +21,20 @@ export class SelectAddComponent {
}
}
+ backgroundHeight: string;
+
+ private _editMode = false;
+ set editMode(value: boolean) {
+ this._editMode = value;
+ this.backgroundHeight = this.getBackgroundHeight();
+ }
+
+ get editMode(): boolean {
+ return this._editMode;
+ }
+
@Output() value: EventEmitter = new EventEmitter();
+ @Output() optionChange: EventEmitter<{ from: string; to: string }> = new EventEmitter();
@ViewChild('top') top: ElementRef;
@ViewChild('bottom') bottom: ElementRef;
@@ -32,6 +46,15 @@ export class SelectAddComponent {
constructor(private cancelService: CancelService) {
this.cancelService.subscribe(this, () => {
this.isOpen = false;
+ this.editMode = false;
+ });
+ }
+
+ changeOption(from: string, event) {
+ console.log(event);
+ this.optionChange.emit({
+ from,
+ to: event.target.value
});
}
@@ -45,15 +68,6 @@ export class SelectAddComponent {
}
}
- get backgroundHeight(): string {
- if (this.isOpen && this.top && this.bottom) {
- const topHeight = this.top.nativeElement.clientHeight;
- const bottomHeight = this.bottom.nativeElement.clientHeight;
- return `${topHeight + bottomHeight}px`;
- }
- return `100%`;
- }
-
addNewOption() {
if (this.newOption) {
this.select(this.newOption);
@@ -69,5 +83,20 @@ export class SelectAddComponent {
toggle() {
this.isOpen = !this.isOpen;
+ if (!this.isOpen) {
+ this.editMode = false;
+ }
+ this.backgroundHeight = this.getBackgroundHeight();
+ console.log('editable', this.editable);
+ }
+
+ private getBackgroundHeight(): string {
+ if (this.isOpen && this.top && this.bottom) {
+ const topHeight = this.top.nativeElement.clientHeight;
+ const bottomHeight = this.bottom.nativeElement.clientHeight;
+ console.log(topHeight, bottomHeight);
+ return `${topHeight + bottomHeight}px`;
+ }
+ return `100%`;
}
}
diff --git a/src/app/model/page.ts b/src/app/model/page.ts
index 81af6d2..142e4f4 100644
--- a/src/app/model/page.ts
+++ b/src/app/model/page.ts
@@ -58,6 +58,12 @@ export class Page extends Serializable implements IPage, PageState {
});
}
+ changeName(to: string) {
+ this.changeProps({
+ name: to
+ });
+ }
+
addTower(name = '') {
let hue;
do {
diff --git a/src/app/services/cancel.service.ts b/src/app/services/cancel.service.ts
index b159577..a8a4448 100644
--- a/src/app/services/cancel.service.ts
+++ b/src/app/services/cancel.service.ts
@@ -11,8 +11,6 @@ interface Subscriber {
export class CancelService {
private subscribers: Subscriber[] = [];
- constructor() {}
-
subscribe(object: object, callback: () => void) {
this.subscribers.push({
object,
@@ -21,10 +19,12 @@ export class CancelService {
}
cancelAllExcept(except: object) {
+ console.log('cancel all except', except);
this.subscribers.filter(s => s.object !== except).map(s => s.callback());
}
cancelAll() {
+ console.log('cancel all');
this.subscribers.map(s => s.callback());
}
}
diff --git a/src/assets/edit.svg b/src/assets/edit.svg
deleted file mode 100644
index c7406cf..0000000
--- a/src/assets/edit.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
diff --git a/src/assets/pen.svg b/src/assets/pen.svg
new file mode 100644
index 0000000..d798204
--- /dev/null
+++ b/src/assets/pen.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/styles.scss b/src/styles.scss
index 9d7f570..d03e6c9 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -29,9 +29,6 @@ html {
body {
height: 100%;
background: $background-gradient-opaque;
-}
-
-body {
text-align: center;
padding: var(--large-padding);
box-sizing: border-box;
+
+
+
+
+
-
+
+
+
+
+
+
-
+
+
+
+ 
+
+
+