-
Notifications
You must be signed in to change notification settings - Fork 460
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature/container properties form #23020
Changes from 7 commits
c9f4b49
c227fd5
3583061
15bd51c
e47a1fd
b0d96dc
b551ec6
8810dbf
8479072
8958892
57ce542
34b3f69
2e69e8d
c2b395f
adf59d6
2af4929
260bbb2
8b25be2
45bafe7
2b1d0ed
0598457
69b736b
52e20ab
00f0da0
9043a59
d47e0c3
61d5453
87f0429
f70673e
998cba5
77f10b8
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -5,6 +5,7 @@ | |
display: flex; | ||
flex: 1; | ||
flex-direction: column; | ||
overflow: auto; | ||
|
||
.container-create__tabs { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. You don't need this nesting here. |
||
.p-tabview-nav { | ||
|
@@ -14,7 +15,7 @@ | |
|
||
.p-tabview-panel { | ||
padding: 0 $spacing-4; | ||
padding-top: $spacing-8; | ||
padding-top: $spacing-4; | ||
} | ||
} | ||
} | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
<ng-container> | ||
<div class="dot-container-properties__title-container"> | ||
<p-inplace #editText> | ||
<ng-template pTemplate="content"> | ||
<span class="p-input-icon-right"> | ||
<i class="pi pi-times" (click)="editText.deactivate()"></i> | ||
<input type="text" pInputText /> | ||
</span> | ||
</ng-template> | ||
<ng-template pTemplate="display"> | ||
Click to Edit | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. language key |
||
<i class="pi pi-pencil"></i> | ||
</ng-template> | ||
</p-inplace> | ||
</div> | ||
<div class="field"> | ||
<label for="description" class="block">Description</label> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. language key |
||
<input id="description" type="text" pInputText /> | ||
</div> | ||
<div class="field"> | ||
<label for="max-contents" class="block">Max Contents</label> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. language key |
||
<input id="max-contents" type="text" pInputText /> | ||
<button pButton class="p-button-secondary" type="button" label="Clear"></button> | ||
<button pButton type="button" label="content type code"></button> | ||
</div> | ||
|
||
<div class="dot-container-properties__code-container-outer"> | ||
<div class="dot-container-properties__pre-post-loop"> | ||
<div class="dot-container-properties__pre-post-loop-inplace"> | ||
<button | ||
pButton | ||
class="p-button-outlined p-button-secondary" | ||
type="button" | ||
label="ADD PRE AND POST LOOP CODE" | ||
></button> | ||
</div> | ||
</div> | ||
<div> | ||
<form [formGroup]="form"> | ||
<dot-textarea-content | ||
formControlName="body" | ||
#value | ||
height="100%" | ||
formControlName="body" | ||
[show]="['code']" | ||
language="html" | ||
(monacoInit)="initEditor($event)" | ||
></dot-textarea-content> | ||
</form> | ||
</div> | ||
<div class="dot-container-properties__pre-post-loop"> | ||
<div class="dot-container-properties__pre-post-loop-inplace"> | ||
<button | ||
pButton | ||
class="p-button-outlined p-button-secondary" | ||
type="button" | ||
label="ADD PRE AND POST LOOP CODE" | ||
></button> | ||
</div> | ||
</div> | ||
</div> | ||
</ng-container> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
@use "variables" as *; | ||
|
||
:host { | ||
.dot-container-properties__title-container { | ||
padding: $spacing-4 0; | ||
} | ||
|
||
.dot-container-properties__code-container-outer { | ||
background: $white; | ||
display: flex; | ||
height: 100%; | ||
flex-direction: column; | ||
|
||
.dot-container-properties__pre-post-loop { | ||
.dot-container-properties__pre-post-loop-inplace { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Don't need all this nesting, BEM does it implicitly |
||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
padding: $spacing-6; | ||
background: #e9ebfc; | ||
} | ||
} | ||
|
||
form { | ||
margin: $spacing-3; | ||
height: 100%; | ||
display: flex; | ||
flex-direction: column; | ||
} | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. With BEM you don't need all the nesting. |
||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
import { Component, Input, OnInit } from '@angular/core'; | ||
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; | ||
|
||
interface MonacoEditorOperation { | ||
range: number; | ||
text: string; | ||
forceMoveMarkers: boolean; | ||
} | ||
|
||
interface MonacoEditor { | ||
getSelection: () => number; | ||
executeEdits: (action: string, data: MonacoEditorOperation[]) => void; | ||
} | ||
fmontes marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
@Component({ | ||
selector: 'dot-container-properties', | ||
templateUrl: './dot-container-properties.component.html', | ||
styleUrls: ['./dot-container-properties.component.scss'] | ||
}) | ||
export class DotContainerPropertiesComponent implements OnInit { | ||
editor: MonacoEditor; | ||
form: UntypedFormGroup; | ||
|
||
@Input() body: string; | ||
|
||
constructor(private fb: UntypedFormBuilder) { | ||
// | ||
} | ||
|
||
ngOnInit(): void { | ||
this.form = this.fb.group({ body: this.body }); | ||
} | ||
|
||
/** | ||
* This method initializes the monaco editor | ||
* | ||
* @param {*} editor | ||
* @memberof DotTemplateComponent | ||
*/ | ||
initEditor(editor: MonacoEditor): void { | ||
this.editor = editor; | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import { NgModule } from '@angular/core'; | ||
import { DotContainerPropertiesComponent } from '@portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component'; | ||
import { CommonModule } from '@angular/common'; | ||
import { InplaceModule } from 'primeng/inplace'; | ||
import { SharedModule } from 'primeng/api'; | ||
import { InputTextModule } from 'primeng/inputtext'; | ||
import { DotPortletBaseModule } from '@components/dot-portlet-base/dot-portlet-base.module'; | ||
import { CardModule } from 'primeng/card'; | ||
import { DotTextareaContentModule } from '@components/_common/dot-textarea-content/dot-textarea-content.module'; | ||
import { ReactiveFormsModule } from '@angular/forms'; | ||
@NgModule({ | ||
declarations: [DotContainerPropertiesComponent], | ||
exports: [DotContainerPropertiesComponent], | ||
imports: [ | ||
CommonModule, | ||
InplaceModule, | ||
SharedModule, | ||
InputTextModule, | ||
DotPortletBaseModule, | ||
CardModule, | ||
DotTextareaContentModule, | ||
ReactiveFormsModule | ||
] | ||
}) | ||
export class DotContainerPropertiesModule {} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
missing the "dot-" prefix
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@alfredo-dotcms , Fixed.