Skip to content
This repository was archived by the owner on Dec 8, 2020. It is now read-only.

Commit 1b6b5fc

Browse files
swmitraswmitra
committed
Custom Design Snippet support
1) Design snippet creation/tagging/bookmark support. 2) Design snippet edit support. 3) Design snippets import/export manually.
1 parent 1f454e6 commit 1b6b5fc

24 files changed

+401
-75
lines changed

‎DesignDOMUpdater.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ define(function (require, exports, module) {
4545
function _appendNewElement(eventParams){
4646
var targetDOMPos = _computeLeftAndTopInTargetDOM(eventParams);
4747
var element = $(eventParams.template)
48+
.css('position','absolute')
4849
.css('top',targetDOMPos.top)
4950
.css('left',targetDOMPos.left)
5051
.css('pointer-events','')
@@ -81,7 +82,7 @@ define(function (require, exports, module) {
8182
}
8283

8384
$(document).on("design.editor.event","#html-design-editor",function(event, type, eventParams,profile){
84-
if(profile === 'html' || profile === 'bootstrap'){
85+
if(profile === 'html' || profile === 'custom'){
8586
if(type === 'create.new.element'){
8687
_appendNewElement(eventParams);
8788
$("#html-design-editor").trigger('html.element.dropped');

‎README.md‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -196,4 +196,11 @@ Versions
196196
* Widget toolbox UI change.
197197
* Addition of Iframe as an element in widget toolbox
198198
* Attribute editor re-styling
199-
* Removed bootstrap widgets from Widget toolbox ( see TODO section )
199+
* Removed bootstrap widgets from Widget toolbox ( see TODO section )
200+
201+
**1.2.0**
202+
* Design snippet creation/tagging/bookmark support.
203+
* Design snippet edit support.
204+
* Design snippets import/export manually.
205+
206+
![Snippet Addition](https://github.com/swmitra/html-designer-user-guide/blob/master/Getting%20Started/AddTemplate.png) ![Snippet Editing](https://github.com/swmitra/html-designer-user-guide/blob/master/Getting%20Started/EditTemplate.png) ![Snippet Bookmark](https://github.com/swmitra/html-designer-user-guide/blob/master/Getting%20Started/BookmarkTemplate.png)

‎SelectAndDrawCreationHandler.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ define(function (require, exports, module) {
9595

9696
function _createWidget(){
9797
var template = ProfileSelector.getProfile(currentContext.profile).getTemplate(currentContext.type);
98-
newElement = $(template.template).appendTo("#element-drawing-plane").css('pointer-events','none');
98+
newElement = $(template.template).appendTo("#element-drawing-plane").css('pointer-events','none').css('position','absolute');
9999
newElementID = template.uid;
100100

101101
}

‎controlhtml/context-menu-template.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,7 @@
1515
</li>
1616
<li><a id="context-delete-element" role="menuitem" tabindex="-1" href="#" data-action="delete-element"><span class="glyphicon glyphicon-trash"></span>&emsp;Delete</a>
1717
</li>
18+
<li><a id="context-add-as-template" role="menuitem" tabindex="-1" href="#" data-action="add-as-shortcut"><span class="glyphicon glyphicon-tag"></span>&emsp;Add as Shortcut</a>
19+
</li>
1820
</ul>
1921
</div>

‎controlhtml/html-elements-catalog.html‎

Lines changed: 41 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
<head>
21
<style>
32
.widgetDragSource {
43
display: block;
@@ -22,10 +21,43 @@
2221
border: 1px solid gray;
2322
border-radius: 4px;
2423
}
25-
</style>
26-
</head>
24+
25+
.contextmenu-listner_create{
26+
margin-top:10px;
27+
display: block;
28+
height:100%;
29+
width:100%;
30+
}
31+
32+
#custom-element-container{
33+
margin-top:10px;
34+
display: block;
35+
box-sizing: content-box;
36+
width:100%;
37+
}
38+
39+
.customTemplateShortcut {
40+
height: 25px;
41+
width: 25px;
42+
margin-left: 1px;
43+
}
44+
45+
.customTemplateShortcut div{
46+
transform-origin: left bottom 0px;
47+
transform: rotate(-42deg);
48+
color: black;
49+
margin-left: 5px;
50+
margin-top: -12px;
51+
width: 42px;
52+
height: 20px;
53+
text-align: center;
54+
font-weight: bold;
55+
}
2756

28-
<body>
57+
.customTemplateShortcut .glyphicon-tag {
58+
zoom:2;
59+
}
60+
</style>
2961
<div class="property-toolbox" id="widget-toolbox">
3062
<div class="propertyToolboxHeader">
3163
<a class="close" id="widget-toolbox-close" style="">×</a>
@@ -51,10 +83,9 @@
5183
</div>
5284

5385
<img class="htmlwidget widgetDragSourceSeperator" src="{{module_path}}/controlhtml/Widget_Seperator.png" alt="" />
54-
55-
<!--<img class="htmlwidget widgetDragSource widgetDrawSource" data-profile="bootstrap" id="ad-element-dropdown" src="{{module_path}}/controlhtml/widgetImages/BS_Button_Dropdown.png" height="15px" width="20px"/>
56-
<img class="htmlwidget widgetDragSource widgetDrawSource" data-profile="bootstrap" id="ad-element-tabs" src="{{module_path}}/controlhtml/widgetImages/BS_Tabs.png" height="15px" width="20px"/>-->
57-
86+
87+
<div id="custom-element-container"></div>
88+
89+
<div class="contextmenu-listner_create"></div>
5890
</div>
59-
</div>
60-
</body>
91+
</div>

‎controlhtml/widgetImages/BS_Button_Dropdown.png‎

-48.6 KB
Binary file not shown.

‎controlhtml/widgetImages/BS_Tabs.png‎

-49 KB
Binary file not shown.

‎controlhtml/widgetImages/BS_Tabs1.png‎

-442 Bytes
Binary file not shown.

‎css/html-design-view.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,18 @@
6363
pointer-events: all;
6464
}
6565

66+
#design-modal-backdrop {
67+
position:absolute;
68+
right:0px;
69+
top:0px;
70+
width: 100% !important;
71+
height:100% !important;
72+
background: rgba(97, 99, 103, 0.24);
73+
z-index:11;
74+
pointer-events: all;
75+
display:none;
76+
}
77+
6678
#element-search-panel
6779
{
6880
background: #484B4C;

‎html/html-design-view.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
</div>
3838
</div>
3939
<div id="design-toolbox-anchor"></div>
40+
<div id="design-modal-backdrop"></div>
4041
<div id="split-view-anchor"></div>
4142
<div id="design-view-anchor" style="display:none"></div>
4243
</div>

0 commit comments

Comments
 (0)