radex
/
jspaint
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Hide parts of the UI as the window gets smaller

main
Isaiah Odhner 2015-06-19 15:52:31 -04:00
parent 5a73ce18c4
commit 05449000c2
3 changed files with 27 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
TODO.md
View File

@ -14,11 +14,6 @@
* Pixelize icons, images, checkered backgrounds when zoomed in
* Gracefully hide things as the window gets smaller (with media queries!)
* Gracefully push the dimension displays off the edge
instead of covering up the text with (usually blank) space
* Issues
* Image > Flip/Rotate, Rotate by angle, ` ` Degrees sort of nullifies the image
* Crashes when saving large images

23
layout.css
View File

@ -48,6 +48,21 @@ html, body, .jspaint {
flex-flow: column;
flex: 1;
}
@media (max-width: 300px) {
.jspaint-horizontal > .jspaint-component-area {
display: none;
}
}
@media (max-height: 340px) {
.jspaint-vertical > .jspaint-component-area {
display: none;
}
}
@media (max-height: 370px) {
.jspaint-vertical > .jspaint-status-area {
display: none !important;
}
}
.jspaint-status-area,
.jspaint-component-area,
.jspaint-menus {
@ -103,12 +118,14 @@ html, body, .jspaint {
height: 1.25em;
}
.jspaint-status-text {
flex: 1;
flex-basis: auto;
flex-grow: 1;
flex-shrink: 0;
padding-right: 2px;
overflow: hidden;
}
.jspaint-status-coordinates {
flex-basis: 114px;
flex-grow: 0;
flex: 0 0 114px;
min-width: 0px;
padding-left: 3px;
border-left: 1px solid #7b7b7b;

19
src/$menus.js
View File

@ -15,7 +15,7 @@
var close_menus = function(){
$menus.find(".jspaint-menu-button").trigger("release");
// Close any rouge floating submenus
// Close any rogue floating submenus
$(".jspaint-menu-popup").hide();
};
@ -131,7 +131,7 @@
if(e.ctrlKey || e.shiftKey || e.altKey){
return;
}
if(e.keyCode === 13){ // enter
if(e.keyCode === 13){ // Enter
e.preventDefault();
e.stopPropagation();
$item.click();
@ -168,24 +168,20 @@
$menu_container.on("keydown", function(e){
var $focused_item = $menu_popup.find(".jspaint-menu-item:focus");
switch(e.keyCode){
case 37: // left
case 37: // Left
$menu_container.prev().find(".jspaint-menu-button").trigger("mousedown");
// $menu_container.prev().find(".jspaint-menu-item").first().focus();
break;
case 39: // right
// console.log($focused_item.is(":contains(.jspaint-menu-item-submenu-area)"), $focused_item.is(":contains(.jspaint-menu-item-submenu-area:not(:empty))"));
case 39: // Right
if($focused_item.find(".jspaint-menu-item-submenu-area:not(:empty)").length){
$focused_item.click();
$(".jspaint-menu-popup .jspaint-menu-item").first().focus();
e.preventDefault();
}else{
$menu_container.next().find(".jspaint-menu-button").trigger("mousedown");
// $menu_container.next().find(".jspaint-menu-item").first().focus();
}
break;
case 40: // down
case 40: // Down
if($menu_popup.is(":visible") && $focused_item.length){
// $focused_item.next(".jspaint-menu-item").focus();
var $next = $focused_item.next();
while($next.length && !$next.is(".jspaint-menu-item")){
$next = $next.next();
@ -196,9 +192,8 @@
$menu_popup.find(".jspaint-menu-item").first().focus();
}
break;
case 38: // up
case 38: // Up
if($menu_popup.is(":visible") && $focused_item.length){
// $focused_item.prev(".jspaint-menu-item").focus();
var $prev = $focused_item.prev();
while($prev.length && !$prev.is(".jspaint-menu-item")){
$prev = $prev.prev();
@ -265,7 +260,7 @@
});
});
$G.on("keypress", function(e){
if(e.keyCode === 27){ // esc
if(e.keyCode === 27){ // Esc
close_menus();
}
});