markup improvements
Mark MacKay
parent
82d9d40214
commit
cba5e38b44
|
|
@ -17,4 +17,18 @@
|
|||
justify-content: center;
|
||||
position: relative;
|
||||
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,4 +1,3 @@
|
|||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
float: left;
|
||||
|
|
|
|||
|
|
@ -16,8 +16,6 @@ body {
|
|||
::selection {background: #000; color: #fff; /* Safari */}
|
||||
::-moz-selection {background: #000; color: #fff; /* Firefox */}
|
||||
|
||||
|
||||
|
||||
html, body {
|
||||
overscroll-behavior-x: none;
|
||||
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 {
|
||||
width:140px;
|
||||
height:300px;
|
||||
overflow:auto;
|
||||
margin:0 auto;
|
||||
position:absolute;
|
||||
top:27px;
|
||||
right:0;
|
||||
border:1px solid black;
|
||||
padding:10px;
|
||||
display:none;
|
||||
background-color:white;
|
||||
z-index: 10;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,0.7);
|
||||
width:140px;
|
||||
height:300px;
|
||||
overflow:auto;
|
||||
margin:0 auto;
|
||||
position:absolute;
|
||||
top:27px;
|
||||
right:0;
|
||||
border:1px solid black;
|
||||
padding:10px;
|
||||
display:none;
|
||||
background-color:white;
|
||||
z-index: 10;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
div#font-selector img {
|
||||
|
|
@ -208,10 +162,6 @@ button:focus {
|
|||
stroke: none;
|
||||
}
|
||||
|
||||
.context_panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvas_panel {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -314,30 +264,6 @@ input[type=file] {
|
|||
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:hover,
|
||||
.draginput.text-input input:active {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -32,6 +32,7 @@
|
|||
<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/select.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="css/panel.css" type="text/css"/>
|
||||
<!-- endbuild -->
|
||||
</head>
|
||||
<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_openclose_path" title="Open/close sub-path">Open Path</div>
|
||||
</div>
|
||||
<!--<div class="tool_button" id="tool_add_subpath" title="Add sub-path"></div>-->
|
||||
</div>
|
||||
|
||||
<!-- Buttons when a single element is selected -->
|
||||
|
|
|
|||
|
|
@ -111,35 +111,12 @@ MD.Panel = function(){
|
|||
|
||||
var currentLayerName = svgCanvas.getCurrentDrawing().getCurrentLayerName();
|
||||
var currentMode = svgCanvas.getMode();
|
||||
if (currentMode === 'pathedit') {
|
||||
$('.context_panel').hide();
|
||||
$('#path_node_panel').show();
|
||||
$('#stroke_panel').hide();
|
||||
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;
|
||||
}
|
||||
|
||||
$('.context_panel').hide();
|
||||
|
||||
if (currentMode === 'pathedit') return showPathEdit();
|
||||
|
||||
var menu_items = $('#cmenu_canvas li');
|
||||
$('.context_panel').hide();
|
||||
|
||||
|
||||
//hack to show the proper multialign box
|
||||
if (multiselected) {
|
||||
|
|
@ -327,6 +304,30 @@ MD.Panel = function(){
|
|||
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.updateContextPanel = updateContextPanel;
|
||||
}
|
||||
Loading…
Reference in New Issue