Skip to content

Commit 013ceae

Browse files
Sorokin-OlegSorokin-Oleg
committed
[dev] vue diagram demo. fixed templates/fixed styles
1 parent 0979a1d commit 013ceae

File tree

8 files changed

+149
-217
lines changed

8 files changed

+149
-217
lines changed

‎public/common/icons/cellphone-android.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎public/common/icons/email-outline.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎public/common/icons/toggle.svg‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎src/App.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
</template>
44

55
<script>
6-
export default {
7-
name: "App",
8-
};
6+
export default {
7+
name: "App",
8+
};
99
</script>
1010

1111
<style>
12-
@import "./index.css";
12+
@import "./index.css";
1313
</style>

‎src/components/hospitalOrgChart/HospitalOrgChartCdn.vue‎

Lines changed: 73 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<button class="dhx_sample-btn dhx_sample-btn--flat" @click="runEditor()">Edit</button>
55
</div>
66
<div v-bind:class="classObject">
7-
<div class="dhx_sample-container__widget" ref="diagram" v-show="collapsed" @click="showMenu"></div>
7+
<div class="dhx_sample-container__widget" ref="diagram" v-show="collapsed"></div>
88
<div class="dhx_sample-widget" ref="editor" v-show="expanded"></div>
99
</div>
1010
</div>
@@ -18,54 +18,10 @@ export default {
1818
data: () => ({
1919
diagram: null,
2020
editor: null,
21-
item: {},
22-
contextMenu: null,
2321
collapsed: true,
2422
expanded: false,
25-
menuData: [
26-
{
27-
type: "menuItem",
28-
id: "mail",
29-
value: "Mail",
30-
icon: "mdi mdi-email",
31-
},
32-
{
33-
type: "menuItem",
34-
id: "call",
35-
value: "Call",
36-
icon: "mdi mdi-phone",
37-
},
38-
{
39-
type: "menuItem",
40-
id: "site",
41-
value: "Open Site",
42-
icon: "mdi mdi-open-in-new",
43-
},
44-
],
4523
}),
4624
mounted() {
47-
fromCDN(["https://cdn.dhtmlx.com/suite/edge/suite.js", "https://cdn.dhtmlx.com/suite/edge/suite.css"]).then(() => {
48-
// eslint-disable-next-line no-undef
49-
this.contextMenu = new dhx.ContextMenu(null, {
50-
css: "dhx_widget--bg_gray",
51-
});
52-
53-
this.contextMenu.data.parse(this.menuData);
54-
this.contextMenu.events.on("click", id => {
55-
switch (id) {
56-
case "mail":
57-
window.open(`mailto:${this.item.mail}`, "_blank");
58-
break;
59-
case "call":
60-
window.open(`tel:${this.item.phone}`, "_blank");
61-
break;
62-
case "site":
63-
window.open("https://dhtmlx.com/docs/products/dhtmlxDiagram/", "_blank");
64-
break;
65-
}
66-
});
67-
});
68-
6925
fromCDN([
7026
"https://cdn.dhtmlx.com/diagram/pro/edge/diagramWithEditor.js",
7127
"https://cdn.dhtmlx.com/diagram/pro/edge/diagramWithEditor.css",
@@ -112,16 +68,14 @@ export default {
11268
],
11369
});
11470
115-
this.diagram.events.on("ShapeClick", id => {
116-
this.item = this.diagram.data.getItem(id);
117-
});
118-
11971
this.editor.events.on("ApplyButton", () => {
12072
this.applyButton();
12173
});
74+
12275
this.editor.events.on("ResetButton", () => {
12376
this.resetButton();
12477
});
78+
12579
this.diagram.data.load("./static/medCardShape.json");
12680
});
12781
},
@@ -131,14 +85,6 @@ export default {
13185
this.collapsed = false;
13286
this.editor.import(this.diagram);
13387
},
134-
showMenu(e) {
135-
// eslint-disable-next-line no-undef
136-
dhx.awaitRedraw().then(() => {
137-
if (e.target.classList.contains("contextMenu_container")) {
138-
this.contextMenu.showAt(e.target, "bottom");
139-
}
140-
});
141-
},
14288
applyButton() {
14389
this.collapsed = true;
14490
this.expanded = false;
@@ -148,30 +94,26 @@ export default {
14894
this.collapsed = true;
14995
this.expanded = false;
15096
},
151-
template(config) {
97+
template({ photo, name, post, phone, mail }) {
15298
return `
153-
<section class="template">
154-
<div class="template_container">
155-
<div class="template_img-container">
156-
<img src="${config.photo}" alt="${config.name}-${config.post}"></img>
157-
</div>
158-
<div class="template_info-container">
159-
<h3>${config.name}</h3>
160-
<p>${config.post}</p>
161-
<span>
162-
<img class="template_icon" src="../common/icons/cellphone-android.svg" alt="phone number"></img>
163-
<p>${config.phone}</p>
164-
</span>
165-
<span>
166-
<img class="template_icon" src="../common/icons/email-outline.svg" alt="email"></img>
167-
<a style="color:#0288D1" href="mailto:${config.mail}" target="_blank">${config.mail}</a>
168-
</span>
169-
</div>
170-
</div>
171-
<div class="contextMenu_container">
172-
<img class="template_icon" src="../common/icons/toggle.svg" alt="toggle"></img>
173-
</div>
174-
</section>`;
99+
<div class="dhx-diagram-demo_personal-card">
100+
<div class="dhx-diagram-demo_personal-card__container dhx-diagram-demo_personal-card__img-container">
101+
<img src="${photo}" alt="${name}-${post}"></img>
102+
</div>
103+
<div class="dhx-diagram-demo_personal-card__container">
104+
<h3>${name}</h3>
105+
<p>${post}</p>
106+
<span class="dhx-diagram-demo_personal-card__info">
107+
<i class="mdi mdi-cellphone-android"></i>
108+
<p>${phone}</p>
109+
</span>
110+
<span class="dhx-diagram-demo_personal-card__info">
111+
<i class="mdi mdi-email-outline"></i>
112+
<a href="mailto:${mail}" target="_blank">${mail}</a>
113+
</span>
114+
</div>
115+
</div>
116+
`;
175117
},
176118
},
177119
computed: {
@@ -190,58 +132,55 @@ export default {
190132
};
191133
</script>
192134

193-
<style scoped>
194-
/deep/ .template {
195-
display: flex;
196-
align-items: flex-start;
197-
justify-content: flex-start;
198-
background: white;
199-
color: rgba(0, 0, 0, 0.7);
200-
border: 1px solid #dfdfdf;
201-
padding: 10px 0 10px 10px;
202-
}
203-
/deep/ .template span {
204-
display: flex;
205-
}
206-
/deep/ .template h3,
207-
.template p {
208-
text-align: left;
209-
font-size: 14px;
210-
line-height: 20px;
211-
height: 20px;
212-
margin: 0 0 4px 0;
213-
overflow: hidden;
214-
text-overflow: ellipsis;
215-
white-space: nowrap;
216-
}
217-
/deep/ .template_container {
218-
height: 100%;
219-
width: 90%;
220-
display: flex;
221-
align-items: center;
222-
justify-content: flex-start;
223-
}
224-
/deep/.template_img-container {
225-
min-width: 93px;
226-
width: 93px;
227-
margin-right: 12px;
228-
}
229-
/deep/ .template_img-container img {
230-
width: inherit;
231-
height: auto;
232-
}
233-
/deep/ .template_icon {
234-
height: 20px;
235-
width: 20px;
236-
margin-right: 4px;
237-
}
238-
/deep/ .contextMenu_container {
239-
width: 10%;
240-
cursor: pointer;
241-
}
242-
/deep/ .contextMenu_container .template_icon {
243-
height: 14px;
244-
width: 4px;
245-
margin: 0;
246-
}
135+
<style>
136+
.dhx-diagram-demo_personal-card {
137+
height: 100%;
138+
display: flex;
139+
align-items: center;
140+
justify-content: center;
141+
background: white;
142+
color: rgba(0, 0, 0, 0.7);
143+
border: 1px solid #DFDFDF;
144+
padding: 10px 12px;
145+
}
146+
.dhx-diagram-demo_personal-card i {
147+
color: rgba(0, 0, 0, 0.7);
148+
height: 20px;
149+
width: 20px;
150+
font-size: 18px;
151+
}
152+
.dhx-diagram-demo_personal-card__info {
153+
display: flex;
154+
}
155+
.dhx-diagram-demo_personal-card__info a {
156+
color:#0288D1
157+
}
158+
.dhx-diagram-demo_personal-card__container {
159+
height: 100%;
160+
width: 100%;
161+
overflow: hidden;
162+
position: relative;
163+
}
164+
.dhx-diagram-demo_personal-card__container h3, .dhx-diagram-demo_personal-card__container p {
165+
text-align: left;
166+
font-size: 14px;
167+
line-height: 20px;
168+
height: 20px;
169+
margin: 0 0 4px 0;
170+
overflow: hidden;
171+
text-overflow: ellipsis;
172+
white-space: nowrap;
173+
}
174+
.dhx-diagram-demo_personal-card__container i {
175+
margin-right: 4px;
176+
}
177+
.dhx-diagram-demo_personal-card__img-container {
178+
min-width: 93px;
179+
width: 93px;
180+
margin-right: 12px;
181+
}
182+
.dhx-diagram-demo_personal-card__img-container img {
183+
width: inherit;
184+
height: auto;
185+
}
247186
</style>

‎src/components/lifeCycleDiagramWithStickyNotes/LifeCycleDiagramWithStickyNotesCdn.vue‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export default {
9595
},
9696
template(config) {
9797
return `
98-
<section class="template" style="background-image: url('${config.background}')">
98+
<section class="dhx-diagram-demo_life-cycle" style="background-image: url('${config.background}')">
9999
<span>${config.text}</span>
100100
</section>
101101
`;
@@ -117,21 +117,21 @@ export default {
117117
};
118118
</script>
119119

120-
<style scoped>
121-
/deep/ .template {
122-
height: 100%;
123-
background-repeat: no-repeat;
124-
background-size: cover;
125-
background-position: center;
126-
display: flex;
127-
align-items: center;
128-
justify-content: center;
129-
font-weight: 500;
130-
overflow: hidden;
131-
}
132-
/deep/ .template span {
133-
text-align: center;
134-
word-wrap: break-word;
135-
white-space: pre-wrap;
136-
}
120+
<style>
121+
.dhx-diagram-demo_life-cycle {
122+
height: 100%;
123+
background-repeat: no-repeat;
124+
background-size: cover;
125+
background-position: center;
126+
display: flex;
127+
align-items: center;
128+
justify-content: center;
129+
font-weight: 500;
130+
overflow: hidden;
131+
}
132+
.dhx-diagram-demo_life-cycle span {
133+
text-align: center;
134+
word-wrap: break-word;
135+
white-space: pre-wrap;
136+
}
137137
</style>

0 commit comments

Comments
 (0)