zcy
/
websch
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

markup improvements

master
Mark MacKay 2021-05-24 13:16:10 -05:00
parent 82d9d40214
commit cba5e38b44
6 changed files with 99 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/css/app.css
View File

@ -17,4 +17,18 @@
justify-content: center; justify-content: center;
position: relative; position: relative;
background: var(--z2); background: var(--z2);
}
#workarea {
display: flex;
position:absolute;
top: 30px;
left: 50px;
bottom: 40px;
right: 175px;
background-color: var(--z2);
overflow: auto;
align-items: center;
justify-content: center;
transition: transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
} }

1
src/css/dropdown.css
View File

@ -1,4 +1,3 @@
.dropdown { .dropdown {
position: relative; position: relative;
float: left; float: left;

102
src/css/method-draw.css
View File

@ -16,8 +16,6 @@ body {
::selection {background: #000; color: #fff; /* Safari */} ::selection {background: #000; color: #fff; /* Safari */}
::-moz-selection {background: #000; color: #fff; /* Firefox */} ::-moz-selection {background: #000; color: #fff; /* Firefox */}
html, body { html, body {
overscroll-behavior-x: none; overscroll-behavior-x: none;
overflow: hidden; overflow: hidden;
@ -46,65 +44,21 @@ html, body {
} }
#workarea {
display: flex;
position:absolute;
top: 30px;
left: 50px;
bottom: 40px;
right: 175px;
background-color: var(--z2);
overflow: auto;
align-items: center;
justify-content: center;
transition: transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
}
#main_icon span {
position: absolute;
width: 100%;
height: 100%;
display: block;
z-index: 2;
}
#panels {
position: absolute;
width: 160px;
height: 100%;
background: var(--z1);
right: 0;
top: 20px;
border-bottom: none;
overflow: visible;
padding: 0 0 0 15px;
}
.touch #panels {
top: 30px;
}
label {
display: block;
color: #999;
white-space: nowrap;
}
div#font-selector { div#font-selector {
width:140px; width:140px;
height:300px; height:300px;
overflow:auto; overflow:auto;
margin:0 auto; margin:0 auto;
position:absolute; position:absolute;
top:27px; top:27px;
right:0; right:0;
border:1px solid black; border:1px solid black;
padding:10px; padding:10px;
display:none; display:none;
background-color:white; background-color:white;
z-index: 10; z-index: 10;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 5px 10px rgba(0,0,0,0.7); box-shadow: 0 5px 10px rgba(0,0,0,0.7);
} }
div#font-selector img { div#font-selector img {
@ -208,10 +162,6 @@ button:focus {
stroke: none; stroke: none;
} }
.context_panel {
display: none;
}
#canvas_panel { #canvas_panel {
display: block; display: block;
} }
@ -314,30 +264,6 @@ input[type=file] {
position: relative; position: relative;
} }
#panels h4 {
color: var(--z15);
font-weight: normal;
margin: 0;
padding: 10px 0 5px 0;
}
#panels .dropdown .icon_label {
border: 1px solid transparent;
height: auto;
}
#panels.multiselected #align_tools {
display: none;
}
#panels.multiselected #multiselected_panel {
display: block !important;
}
#panels.multiselected #multiselected_panel .hidable {
display: none;
}
.draginput.text-input input, .draginput.text-input input,
.draginput.text-input input:hover, .draginput.text-input input:hover,
.draginput.text-input input:active { .draginput.text-input input:active {

42
src/css/panel.css Normal file
View File

@ -0,0 +1,42 @@
#panels {
position: absolute;
width: 160px;
height: 100%;
background: var(--z1);
right: 0;
top: 20px;
border-bottom: none;
overflow: visible;
padding: 0 0 0 15px;
}
.context_panel {
display: none;
}
.context_panel h4 {
color: var(--z15);
font-weight: normal;
margin: 0;
padding: 10px 0 5px 0;
}
.context_panel label {
display: block;
color: var(--z13);
white-space: nowrap;
}
#align_tools {
display: none;
}
#panels.multiselected #multiselected_panel {
display: block !important;
}
#panels.multiselected #multiselected_panel .hidable {
display: none;
}

2
src/index.html
View File

@ -32,6 +32,7 @@
<link rel="stylesheet" href="css/tools.css" type="text/css"/> <link rel="stylesheet" href="css/tools.css" type="text/css"/>
<link rel="stylesheet" href="css/button.css" type="text/css"/> <link rel="stylesheet" href="css/button.css" type="text/css"/>
<link rel="stylesheet" href="css/select.css" type="text/css"/> <link rel="stylesheet" href="css/select.css" type="text/css"/>
<link rel="stylesheet" href="css/panel.css" type="text/css"/>
<!-- endbuild --> <!-- endbuild -->
</head> </head>
<body> <body>
@ -405,7 +406,6 @@
<div class="button full" id="tool_node_delete" title="Delete Node">Delete Node</div> <div class="button full" id="tool_node_delete" title="Delete Node">Delete Node</div>
<div class="button full" id="tool_openclose_path" title="Open/close sub-path">Open Path</div> <div class="button full" id="tool_openclose_path" title="Open/close sub-path">Open Path</div>
</div> </div>
<!--<div class="tool_button" id="tool_add_subpath" title="Add sub-path"></div>-->
</div> </div>
<!-- Buttons when a single element is selected --> <!-- Buttons when a single element is selected -->

55
src/js/Panel.js
View File

@ -111,35 +111,12 @@ MD.Panel = function(){
var currentLayerName = svgCanvas.getCurrentDrawing().getCurrentLayerName(); var currentLayerName = svgCanvas.getCurrentDrawing().getCurrentLayerName();
var currentMode = svgCanvas.getMode(); var currentMode = svgCanvas.getMode();
if (currentMode === 'pathedit') {
$('.context_panel').hide(); $('.context_panel').hide();
$('#path_node_panel').show();
$('#stroke_panel').hide(); if (currentMode === 'pathedit') return showPathEdit();
var point = svgCanvas.pathActions.getNodePoint();
$('#tool_add_subpath').removeClass('push_button_pressed').addClass('tool_button');
$('#tool_node_delete').toggleClass('disabled', !svgCanvas.pathActions.canDeleteNodes);
if(point) {
var seg_type = $('#seg_type');
point.x = svgedit.units.convertUnit(point.x);
point.y = svgedit.units.convertUnit(point.y);
$('#path_node_x').val(Math.round(point.x));
$('#path_node_y').val(Math.round(point.y));
if(point.type) {
seg_type.val(point.type).removeAttr('disabled');
$("#seg_type_label").html(point.type === 4 ? "Straight" : "Curve")
} else {
seg_type.val(4).attr('disabled','disabled');
}
}
$("#panels").removeClass("multiselected")
$("#stroke_panel").hide();
$("#canvas_panel").hide();
return;
}
var menu_items = $('#cmenu_canvas li'); var menu_items = $('#cmenu_canvas li');
$('.context_panel').hide();
//hack to show the proper multialign box //hack to show the proper multialign box
if (multiselected) { if (multiselected) {
@ -327,6 +304,30 @@ MD.Panel = function(){
return false; return false;
}); });
function showPathEdit(){
$('#path_node_panel').show();
$('#stroke_panel').hide();
var point = svgCanvas.pathActions.getNodePoint();
$('#tool_node_delete').toggleClass('disabled', !svgCanvas.pathActions.canDeleteNodes);
if(point) {
var seg_type = $('#seg_type');
point.x = svgedit.units.convertUnit(point.x);
point.y = svgedit.units.convertUnit(point.y);
$('#path_node_x').val(Math.round(point.x));
$('#path_node_y').val(Math.round(point.y));
if(point.type) {
seg_type.val(point.type).removeAttr('disabled');
$("#seg_type_label").html(point.type === 4 ? "Straight" : "Curve")
} else {
seg_type.val(4).attr('disabled','disabled');
}
}
$("#panels").removeClass("multiselected")
$("#stroke_panel").hide();
$("#canvas_panel").hide();
return;
}
this.show = show; this.show = show;
this.updateContextPanel = updateContextPanel; this.updateContextPanel = updateContextPanel;
} }