Skip to content

Commit 69f9c1f

Browse files
asoftwareworldasoftwareworld
committed
#40 #41 Implemented and fixed design issues as well
1 parent 4001f0c commit 69f9c1f

File tree

22 files changed

+362
-349
lines changed

22 files changed

+362
-349
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@asoftwareworld/form-builder",
3-
"version": "5.0.2",
3+
"version": "5.0.4",
44
"author": "Anish Sharma",
55
"license": "MIT",
66
"scripts": {

‎src/assets/core/_images.scss

Lines changed: 41 additions & 216 deletions
Original file line numberDiff line numberDiff line change
@@ -1,229 +1,54 @@
1-
// .img-thumbnail{
2-
// border-radius: 16px;
3-
// }
4-
// .img-raised{
5-
// @include shadow-big-image();
6-
// }
7-
8-
// .rounded{
9-
// border-radius: $border-radius-large !important;
10-
// }
11-
12-
// .avatar-upload {
13-
// position: relative;
14-
// max-width: 205px;
15-
// .avatar-edit {
16-
// position: absolute;
17-
// right: 12px;
18-
// z-index: 1;
19-
// top: 10px;
20-
// span {
21-
// display: none;
22-
// + label {
23-
// display: inline-block;
24-
// width: 30px;
25-
// height: 30px;
26-
// margin-bottom: 0;
27-
// border-radius: 100%;
28-
// background: #FFFFFF;
29-
// border: 1px solid transparent;
30-
// box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
31-
// cursor: pointer;
32-
// font-weight: normal;
33-
// transition: all .2s ease-in-out;
34-
// &:hover {
35-
// background: #f1f1f1;
36-
// border-color: #d6d6d6;
37-
// }
38-
// &:after {
39-
// content: "\f040";
40-
// font-family: 'FontAwesome';
41-
// color: #757575;
42-
// position: absolute;
43-
// top: 8px;
44-
// left: 0;
45-
// right: 0;
46-
// text-align: center;
47-
// margin: auto;
48-
// }
49-
// }
50-
// }
51-
// }
52-
// .avatar-preview {
53-
// width: 192px;
54-
// height: 192px;
55-
// position: relative;
56-
// border-radius: 100%;
57-
// border: 6px solid #F8F8F8;
58-
// box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
59-
// > div {
60-
// width: 100%;
61-
// height: 100%;
62-
// border-radius: 100%;
63-
// background-size: cover;
64-
// background-repeat: no-repeat;
65-
// background-position: center;
66-
// }
67-
// }
68-
// }
69-
.asw-avatar-wrap {
70-
position: relative;
71-
height: 152px;
72-
width: 152px;
73-
border-radius: 50%;
74-
margin: 10px 0;
75-
&:hover{
76-
cursor: pointer;
77-
}
78-
.asw-profile-pic {
79-
height: 100%;
80-
width: 100%;
81-
transition: all .3s ease;
82-
&:after{
83-
font-family: FontAwesome;
84-
content: "\f030";
85-
top: 0; left: 0;
86-
width: 100%;
87-
height: 100%;
88-
position: absolute;
89-
font-size: 190px;
90-
background: #ecf0f1;
91-
color: #34495e;
92-
text-align: center;
93-
}
94-
}
95-
.asw-upload-button {
96-
position: absolute;
97-
top: 0; left: 0;
98-
height: 100%;
99-
width: 100%;
100-
.fa-camera {
101-
position: absolute;
102-
font-size: 18px;
103-
height: 40px;
104-
width: 40px;
105-
bottom: 0;
106-
right: 0;
107-
text-align: center;
108-
transition: all .3s ease;
109-
color: #5f6368;
110-
background: #fff;
111-
display: flex;
112-
align-items: center;
113-
justify-content: center;
114-
box-shadow: 0 0 3px 3px #e5e0e0;
115-
border-radius: 100%;
116-
}
117-
}
118-
.asw-avatar-wrapper + .asw-upload-button {
119-
.fa-camera {
120-
bottom: -10px !important;
121-
right: -10px !important;
122-
}
123-
}
124-
125-
}
126-
.asw-avatar-wrapper, .asw-avatar-wrapper-circle {
127-
position: relative;
128-
height: 152px;
129-
width: 152px;
130-
border-radius: 50%;
1+
.imgcrop-area {
2+
width: 100%;
3+
height: 410px;
1314
overflow: hidden;
132-
box-shadow: 1px 1px 10px -5px black;
133-
transition: all .3s ease;
134-
5+
background: #e6e9ee;
1356
}
136-
.asw-avatar-wrapper {
137-
border-radius: 5px;
138-
.asw-upload-button {
139-
.fa-camera {
140-
bottom: -10px !important;
141-
right: -10px !important;
142-
}
7+
.imgcrop-preview {
8+
position: relative;
9+
width: 100%;
10+
height: 200px;
11+
margin: 10px auto;
12+
background: #e6e9ee;
13+
text-align: center;
14+
&:after {
15+
content: attr(data-text);
16+
display: block;
17+
position: absolute;
18+
height: 50%;
19+
text-align: center;
20+
margin: auto;
21+
top: 0;
22+
left: 0;
23+
bottom: 0;
24+
right: 0;
25+
z-index: 0;
26+
color: #8394a9;
14327
}
144-
}
145-
146-
147-
// asw-image-crop {
148-
// max-height: 350px!important;
149-
// }
150-
151-
// .avatar-upload {
152-
// position: relative;
153-
// cursor: pointer;
154-
// text-align: center;
155-
// }
156-
157-
// .avatar-preview {
158-
// width: 106px;
159-
// height: 106px;
160-
// background-color: #999999;
161-
// border: 4px solid #CCCCCC;
162-
// color: #FFFFFF;
163-
// overflow: hidden;
164-
// transition: all 0.2s;
165-
// -webkit-transition: all 0.2s;
166-
167-
// &:hover{
168-
// border-color: #2ca8ff;
169-
// }
170-
// }
171-
// .avatar-src {
172-
// width: 100%;
173-
// }
174-
// .circle {
175-
// border-radius: 50%;
176-
// }
177-
// .editor {
178-
// height: 100%;
179-
// }
180-
181-
.canvas {
182-
align-items: center;
183-
display: flex;
184-
height: 100%;
185-
justify-content: center;
186-
& > asw-image-crop {
187-
max-height: 100%;
28+
>img {
29+
position: relative;
30+
z-index: 1;
18831
max-width: 100%;
18932
}
19033
}
191-
.toolbar {
192-
display: flex;
193-
justify-content: center;
194-
align-items: center;
195-
flex-wrap: wrap;
34+
.asw-original {
35+
display: inline-block;
36+
margin: 0px auto;
19637
}
19738

198-
.tools {
199-
display: inline-flex;
200-
flex-direction: column;
201-
padding: 20px;
202-
margin: 10px;
203-
background: #fff;
204-
border-radius: 6px;
205-
box-shadow: 0 3px 10px rgba(0, 0, 0, .4);
39+
.asw-original,
40+
.asw-circular-square {
41+
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3);
20642
}
207-
208-
.toolbar-size {
209-
display: flex;
210-
justify-content: space-around;
211-
align-items: center;
212-
213-
&:first-child {
214-
margin-bottom: 10px;
43+
@media screen and (max-width: 690px) {
44+
.asw-original {
45+
margin-bottom: 50px;
21546
}
21647
}
21748

218-
.btn-selector {
219-
cursor: pointer;
220-
221-
&.selected {
222-
color: #bdbdbd;
223-
}
224-
225-
&.disabled {
226-
cursor: initial;
227-
color: #bdbdbd;
228-
}
49+
.asw-circular-square {
50+
border-radius: 50%;
51+
}
52+
.asw-pt-10 {
53+
padding-top: 10px;
22954
}

‎src/assets/data/basic-control.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@
8585
"id": "EXPORT_MACHINE(IITASALS000250)_PARAMETER(Ruota 1 lato # A Posizione (mm))",
8686
"tooltip": "Ruota 1 lato # A Posizione (mm) from BBM WHEELS",
8787
"label": "BBM Wheels Posizione",
88-
"value": "12",
88+
"value": "70",
8989
"style": "outline",
9090
"column": "col-md-6",
9191
"customClass": "",
@@ -99,7 +99,7 @@
9999
"id": "EXPORT_MACHINE(IITASALS000250)_PARAMETER(Disco lato #3 (B) Forza (kN))",
100100
"tooltip": "Disco lato #3 (B) Forza (kN)) from BBM WHEELS",
101101
"label": "BBM Wheels Forza",
102-
"value": "12",
102+
"value": "400",
103103
"style": "outline",
104104
"column": "col-md-6",
105105
"customClass": "",

‎src/components/form-builder/default-controls.ts

Lines changed: 5 additions & 6 deletions
Large diffs are not rendered by default.

‎src/components/form-control/core/constant/constants.ts

Lines changed: 4 additions & 1 deletion
Large diffs are not rendered by default.

‎src/components/form-control/drawing/drawing.html

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
<div class="{{control.class}}">
2-
<img src="{{control.imageUrl}}" [height]="control.height" [width]="control.width"/>
2+
<img src="{{control.imageUrl}}" [height]="control.height" [width]="control.width"/><div class="asw-pt-10">
3+
<button mat-stroked-button
4+
type="button"
5+
matTooltip="Draw Image"
6+
[matTooltipPosition]="'below'"
7+
(click)="drawingImageDialog(control, controlIndex)">
8+
<mat-icon>draw</mat-icon>
9+
Draw image
10+
</button>
11+
</div>
312
</div>
413
<div class="row" *ngIf="isPreviewTemplate">
514
<div class="col-md-12">
@@ -17,13 +26,6 @@
1726
(click)="editDrawingDialog(control, controlIndex)">
1827
<mat-icon>edit</mat-icon>
1928
</button>
20-
<button mat-icon-button
21-
type="button"
22-
matTooltip="Draw Image"
23-
[matTooltipPosition]="'below'"
24-
(click)="drawingImageDialog(control, controlIndex)">
25-
<mat-icon>draw</mat-icon>
26-
</button>
2729
<button mat-icon-button
2830
type="button"
2931
matTooltip="Delete"

‎src/components/form-control/image/image-dialog.html

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,13 +42,37 @@ <h4 mat-dialog-title>Edit Property</h4>
4242
</mat-form-field>
4343
</div>
4444
</div>
45+
<div class="row">
46+
<div class="col-md-6">
47+
<mat-form-field appearance="outline" class="asw-mat-form-field">
48+
<mat-label>Height</mat-label>
49+
<input matInput type="text"
50+
name="label"
51+
placeholder="Height"
52+
(keypress)="objectUtils.keyPressNumbersWithDecimal($event)"
53+
matTooltip="Height"
54+
formControlName="height">
55+
</mat-form-field>
56+
</div>
57+
<div class="col-md-6">
58+
<mat-form-field appearance="outline" class="asw-mat-form-field">
59+
<mat-label>Width</mat-label>
60+
<input matInput type="text"
61+
name="label"
62+
placeholder="Width"
63+
(keypress)="objectUtils.keyPressNumbersWithDecimal($event)"
64+
matTooltip="Width"
65+
formControlName="width">
66+
</mat-form-field>
67+
</div>
68+
</div>
4569
<div class="row">
4670
<div class="col-md-12">
4771
<mat-form-field appearance="outline" class="asw-mat-form-field">
4872
<mat-label>Select image shape</mat-label>
4973
<mat-select formControlName="imageShape" matTooltip="Select image shape">
50-
<mat-option value="asw-avatar-wrapper-circle">Circle</mat-option>
51-
<mat-option value="asw-avatar-wrapper">Square</mat-option>
74+
<mat-option value="asw-circular-square">Circle</mat-option>
75+
<mat-option value="asw-original">Square</mat-option>
5276
</mat-select>
5377
</mat-form-field>
5478
</div>

0 commit comments

Comments
 (0)