Merge pull request #75 from OptimistikSAS/issue/43

#43 With a small window, the look of the top toolbar is broken
master
JFH 2021-02-23 00:04:42 +01:00 committed by GitHub
commit 4e12aa3c98
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 64 additions and 14 deletions

View File

@ -12,7 +12,7 @@ template.innerHTML = `
{
height: 24px;
width: 24px;
margin: 2px 2px 4px;
margin: 2px 1px 4px;
padding: 3px;
background-color: var(--icon-bg-color);
cursor: pointer;

View File

@ -28,7 +28,7 @@ template.innerHTML = `
.menu-button {
height: 24px;
width: 24px;
margin: 2px 2px 4px;
margin: 2px 1px 4px;
padding: 3px;
background-color: var(--icon-bg-color);
cursor: pointer;

View File

@ -27,7 +27,7 @@ template.innerHTML = `
.menu-button {
height: 24px;
width: 24px;
margin: 2px 2px 4px;
margin: 2px 1px 4px;
padding: 3px;
background-color: var(--icon-bg-color);
cursor: pointer;

View File

@ -12,7 +12,7 @@ template.innerHTML = `
color: #fff;
}
elix-menu-button::part(popup-toggle) {
padding: 0.25em 0.60em !important
padding: 0.25em 0.30em !important
}
:host ::slotted([current]){
background-color: var(--icon-bg-color-hover) !important;

View File

@ -88,23 +88,31 @@
<se-button id="tool_clone" title="Duplicate Element" shortcut="D" src="./images/clone.svg"></se-button>
<se-button id="tool_delete" title="Delete Element" shortcut="Backspace" src="./images/delete.svg">
</se-button>
</div>
<div class="toolset">
<div class="tool_sep"></div>
<se-button id="tool_move_top" title="Bring to Front" shortcut="Ctrl+Shift+]" src="./images/move_top.svg">
</se-button>
<se-button id="tool_move_bottom" title="Send to Back" shortcut="Ctrl+Shift+[" src="./images/move_bottom.svg">
</se-button>
</div>
<div class="toolset">
<se-button id="tool_topath" title="Convert to Path" src="./images/to_path.svg"></se-button>
<se-button id="tool_reorient" title="Reorient path" src="./images/reorient.svg"></se-button>
<se-button id="tool_make_link" title="Make (hyper)link" src="./images/globe_link.svg"></se-button>
</div>
<div class="toolset">
<div class="tool_sep"></div>
<se-input id="elem_id" data-attr="id" size="10" label="id" title="Identify the element"></se-input>
</div>
<div class="toolset">
<se-input id="elem_class" data-attr="class" size="10" label="class" title="Element class"></se-input>
</div>
<se-spin-input size="3" id="angle" min=-180 max=180 step=5 src="./images/angle.svg"
title="Change rotation angle"></se-spin-input>
<se-spin-input size="2" id="blur" min=0 max=100 step=5 src="./images/blur.svg"
title="Change gaussian blur value"></se-spin-input>
<se-list id="tool_position" title="Align Element to Page" label="">
<se-list id="tool_position" title="Align Element to Page" label="" width="22px" height="24px">
<se-list-item id="tool_posleft" value="l">
<img title="align left" src="./images/align_left.svg" height="22px">
</se-list-item>

View File

@ -206,7 +206,7 @@ class TopPanelHandlers {
});
if (tagName === 'text') {
$('#text_panel').css('display', 'inline');
$('#text_panel').css('display', 'inline-block');
$('#tool_font_size').css('display', 'inline');
$id('tool_italic').pressed = this.svgCanvas.getItalic();
$id('tool_bold').pressed = this.svgCanvas.getBold();

View File

@ -306,12 +306,12 @@ hr {
#tools_top {
position: absolute;
left: 105px;
left: 96px;
top: 2px;
min-height: 40px;
border-bottom: none;
overflow: auto;
right:2px;
overflow: visible;
right:1px;
}
#tools_top .tool_sep {
@ -320,20 +320,19 @@ hr {
#tools_top > div > * {
float: left;
margin-right: 1px;
}
#tools_top se-input {
margin-top: 6px;
height: 15px;
margin-top: 5px;
height: 34px;
}
#tools_top se-spin-input, #tools_top se-list {
margin-top: 5px;
height: 15px;
height: 34px;
}
#tools_top se-dropdown-list {
margin-top: 5px;
height: 15px;
height: 34px;
}
/*—————————————————————————————*/
@ -725,4 +724,47 @@ ul li.current {
.dropdown li.tool_button {
width: 24px;
}
@media screen and (max-width:1250px) {
.expanded #palette_holder {
left: 560px;
overflow-x: scroll;
padding: 0 5px;
margin-top: 2px;
height: 30px;
}
#tools_top {
height: 71px;
overflow-x: scroll;
}
#workarea, #sidepanels {
top: 70px !important;
}
#rulers #ruler_corner,
#rulers #ruler_x, #tools_left {
top: 71px;
}
#rulers #ruler_y {
top: 86px;
}
#cur_context_panel {
top: 87px;
}
#selected_panel {
clear: right;
}
}
@media screen and (max-width:1100px) {
#tools_bottom:not(.expanded) #palette_holder {
left: 410px;
overflow-x: scroll;
padding: 0 5px;
margin-top: 2px;
height: 30px;
}
}