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

alignment css restructure

master
Mark MacKay 2021-05-24 13:40:10 -05:00
parent cba5e38b44
commit 12a592ab86
5 changed files with 48 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/css/align_buttons.css Normal file
View File

@ -0,0 +1,33 @@
.align_button {
float: left;
height: 26px;
height: 26px;
border: solid var(--z2) 10px;
outline: solid var(--z1) 1px;
background-color: var(--z2);
cursor: pointer;
position: relative;
}
.align_button:hover {
background-color: var(--z3);
border-color: var(--z3);
}
.align_button svg {
fill: #999;
}
.align_button:hover svg {
fill: #fff;
}
.align_button:nth-child(1) {border-radius: var(--x1) 0 0 0;}
.align_button:nth-child(3) {border-radius: 0 var(--x1) 0 0;}
.align_button:nth-child(4) {border-radius: 0 0 0 var(--x1);}
.align_button:nth-child(6) {border-radius: 0 0 var(--x1) 0;}
.align_buttons .push_button {
display: block;
float: left;
}

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

@ -275,45 +275,12 @@ input[type=file] {
text-indent: 8px;
}
.draginput_cell {
float: left;
height: 26px;
height: 26px;
border: solid var(--z2) 10px;
outline: solid var(--z1) 1px;
background-color: var(--z2);
cursor: pointer;
position: relative;
}
.draginput_cell:hover {
background-color: var(--z5);
}
.draginput_cell svg {
fill: #999;
}
.draginput_cell:hover svg {
fill: #fff;
}
.draginput.textcontent {
position: absolute;
opacity: 0;
z-index: 0;
}
.align_buttons .draginput_cell:nth-child(1) {border-radius: var(--x1) 0 0 0;}
.align_buttons .draginput_cell:nth-child(3) {border-radius: 0 var(--x1) 0 0;}
.align_buttons .draginput_cell:nth-child(4) {border-radius: 0 0 0 var(--x1);}
.align_buttons .draginput_cell:nth-child(6) {border-radius: 0 0 var(--x1) 0;}
.align_buttons .push_button {
display: block;
float: left;
}
ul li.current {
background-color: #F4E284;
}

1
src/css/panel.css
View File

@ -28,7 +28,6 @@
}
#align_tools {
display: none;
}

25
src/index.html
View File

@ -33,6 +33,7 @@
<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"/>
<link rel="stylesheet" href="css/align_buttons.css" type="text/css"/>
<!-- endbuild -->
</head>
<body>
@ -442,32 +443,32 @@
<div class="toolset align_buttons" id="tool_position">
<label>
<div class="col last clear" id="position_opts">
<div class="draginput_cell" id="tool_posleft" title="Align Left" data-align="left">
<div class="align_button" id="tool_posleft" title="Align Left" data-align="left">
<svg viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg" width="27" height="27">
<path d="M 2 1 L 2 5 L 14 5 L 14 11 L 2 11 L 2 16 L 20 16 L 20 22 L 2 22 L 2 26 L 1 26 L 1 1 L 2 1 Z" />
</svg>
</div>
<div class="draginput_cell" id="tool_poscenter" title="Align Center" data-align="center">
<div class="align_button" id="tool_poscenter" title="Align Center" data-align="center">
<svg viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg" width="27" height="27">
<path d="M 13 1 L 14 1 L 14 6 L 22 6 L 22 12 L 14 12 L 14 15 L 19 15 L 19 21 L 14 21 L 14 26 L 13 26 L 13 21 L 8 21 L 8 15 L 13 15 L 13 12 L 5 12 L 5 6 L 13 6 L 13 1 Z" />
</svg>
</div>
<div class="draginput_cell" id="tool_posright" title="Align Right" data-align="right">
<div class="align_button" id="tool_posright" title="Align Right" data-align="right">
<svg viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg" width="27" height="27">
<path d="M 25 1 L 25 5 L 13 5 L 13 11 L 25 11 L 25 16 L 7 16 L 7 22 L 25 22 L 25 26 L 26 26 L 26 1 L 25 1 Z"/>
</svg>
</div>
<div class="draginput_cell" id="tool_postop" title="Align Top" data-align="top">
<div class="align_button" id="tool_postop" title="Align Top" data-align="top">
<svg viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg" width="27" height="27">
<path d="M 1 2 L 5 2 L 5 14 L 11 14 L 11 2 L 16 2 L 16 20 L 22 20 L 22 2 L 26 2 L 26 1 L 1 1 L 1 2 Z"/>
</svg>
</div>
<div class="draginput_cell" id="tool_posmiddle" title="Align Middle" data-align="middle">
<div class="align_button" id="tool_posmiddle" title="Align Middle" data-align="middle">
<svg viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg" width="27" height="27">
<path d="M 26 13 L 26 14 L 21 14 L 21 22 L 15 22 L 15 14 L 12 14 L 12 19 L 6 19 L 6 14 L 1 14 L 1 13 L 6 13 L 6 8 L 12 8 L 12 13 L 15 13 L 15 5 L 21 5 L 21 13 L 26 13 Z"/>
</svg>
</div>
<div class="draginput_cell" id="tool_posbottom" title="Align Bottom" data-align="bottom">
<div class="align_button" id="tool_posbottom" title="Align Bottom" data-align="bottom">
<svg viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg" width="27" height="27">
<path d="M 1 25 L 5 25 L 5 13 L 11 13 L 11 25 L 16 25 L 16 7 L 22 7 L 22 25 L 26 25 L 26 26 L 1 26 L 1 25"/>
</svg>
@ -492,32 +493,32 @@
</div>
</label>
<div class="col last clear">
<div class="draginput_cell" id="tool_alignleft" title="Align Left" data-align="left">
<div class="align_button" id="tool_alignleft" title="Align Left" data-align="left">
<svg viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg" width="27" height="27">
<path d="M 2 1 L 2 5 L 14 5 L 14 11 L 2 11 L 2 16 L 20 16 L 20 22 L 2 22 L 2 26 L 1 26 L 1 1 L 2 1 Z" />
</svg>
</div>
<div class="draginput_cell" id="tool_aligncenter" title="Align Center" data-align="center">
<div class="align_button" id="tool_aligncenter" title="Align Center" data-align="center">
<svg viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg" width="27" height="27">
<path d="M 13 1 L 14 1 L 14 6 L 22 6 L 22 12 L 14 12 L 14 15 L 19 15 L 19 21 L 14 21 L 14 26 L 13 26 L 13 21 L 8 21 L 8 15 L 13 15 L 13 12 L 5 12 L 5 6 L 13 6 L 13 1 Z" />
</svg>
</div>
<div class="draginput_cell" id="tool_alignright" title="Align Right" data-align="right">
<div class="align_button" id="tool_alignright" title="Align Right" data-align="right">
<svg viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg" width="27" height="27">
<path d="M 25 1 L 25 5 L 13 5 L 13 11 L 25 11 L 25 16 L 7 16 L 7 22 L 25 22 L 25 26 L 26 26 L 26 1 L 25 1 Z"/>
</svg>
</div>
<div class="draginput_cell" id="tool_aligntop" title="Align Top" data-align="top">
<div class="align_button" id="tool_aligntop" title="Align Top" data-align="top">
<svg viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg" width="27" height="27">
<path d="M 1 2 L 5 2 L 5 14 L 11 14 L 11 2 L 16 2 L 16 20 L 22 20 L 22 2 L 26 2 L 26 1 L 1 1 L 1 2 Z"/>
</svg>
</div>
<div class="draginput_cell" id="tool_alignmiddle" title="Align Middle" data-align="middle">
<div class="align_button" id="tool_alignmiddle" title="Align Middle" data-align="middle">
<svg viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg" width="27" height="27">
<path d="M 26 13 L 26 14 L 21 14 L 21 22 L 15 22 L 15 14 L 12 14 L 12 19 L 6 19 L 6 14 L 1 14 L 1 13 L 6 13 L 6 8 L 12 8 L 12 13 L 15 13 L 15 5 L 21 5 L 21 13 L 26 13 Z"/>
</svg>
</div>
<div class="draginput_cell" id="tool_alignbottom" title="Align Bottom" data-align="bottom">
<div class="align_button" id="tool_alignbottom" title="Align Bottom" data-align="bottom">
<svg viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg" width="27" height="27">
<path d="M 1 25 L 5 25 L 5 13 L 11 13 L 11 25 L 16 25 L 16 7 L 22 7 L 22 25 L 26 25 L 26 26 L 1 26 L 1 25"/>
</svg>

4
src/js/Panel.js
View File

@ -42,12 +42,12 @@ MD.Panel = function(){
// Align
$('#position_opts .draginput_cell').on("click", function(){
$('#position_opts .align_button').on("click", function(){
$('#align_relative_to').val()
svgCanvas.alignSelectedElements(this.getAttribute("data-align")[0], 'page');
});
$('.align_buttons .draginput_cell').on("click", function(){
$('.align_buttons .align_button').on("click", function(){
svgCanvas.alignSelectedElements(this.getAttribute("data-align")[0], $('#align_relative_to').val());
});