Commit f03e0459 authored by Ivica Bukvic's avatar Ivica Bukvic Committed by Albert Gräf
Browse files

Dialog and other GUI improvements

* Created new and hopefully improved dialogs that should work on all
  three OSs. These include improved margins, optimal sizes that account
  for OS-specific idiosyncrasies, use of non-native toplevel window
  titlebars that cause bunch of issues (e.g. ability to maximize a
  dialog window since nw.js, at least in the earlier versions, has
  spotty support for disabling those), fixed window sizes with minimal
  scrollbars where appropriate, proper spacing between items, better
  positioning of the checkbox and radio buttons, etc.

* Enabled CTRL+W for the search dialog.

* Improved and consistent find bar appearance on all windows (console,
  patch, search).

* Refined activated box to match different zoom levels and font
  sizes. Small discrepancies still exist when using both custom fonts
  and zoom levels, but these are now no more than pixel off, whereas
  before it was all over the place.

* Made sure that patch windows on all OSs are exactly the same size,
  even w...
parent 9921397d
......@@ -27,6 +27,17 @@ body {
background: transparent;
}
#hscroll:hover, #vscroll:hover {
background-color: rgba(0, 0, 0, 0.39) !important;
}
#hscroll, #vscroll {
background-color: rgba(0, 0, 0, 0.267);
}
#hscroll, #vscroll {
cursor: -webkit-grabbing;
}
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
......@@ -279,7 +290,7 @@ mark.console_find_highlighted {
min-width: 3ch;
position: absolute;
display: table-cell;
padding: 3px 1.5px 3px 1.5px;
padding: 1px 0px 3px 1.5px;
margin-left: 1px;
/* box-shadow: inset 1px 0px 0px 1px #000; */
color: black; /* text color */
......@@ -513,7 +524,7 @@ text {
stroke: #e87216;
fill: #e87216;
stroke-width: 5;
-webkit-animation: fizzle 0.2s ease-in 1;
-webkit-animation: fizzle 0.1s ease-in 1;
}
.xlet_disabled {
......@@ -525,8 +536,8 @@ text {
width: 100%;
height: 1em;
padding-top: 2px;
padding-left: 2px;
padding-bottom: 8px;
padding-left: 3px;
padding-bottom: 9px;
background: silver;
position: fixed;
bottom: 0;
......@@ -537,8 +548,8 @@ text {
width: 100%;
height: 1em;
padding-top: 2px;
padding-left: 2px;
padding-bottom: 8px;
padding-left: 3px;
padding-bottom: 9px;
background: silver;
position: fixed;
bottom: 0;
......@@ -554,7 +565,7 @@ text {
/*box-shadow: 7px 7px 5px grey;*/
left: 50%;
top: 50%;
width: 40%;
width: 70%;
transform: translate(-50%, -50%);
}
......@@ -575,7 +586,7 @@ dialog::backdrop {
.dialog_body {
font-family: "DejaVu Sans", sans-serif;
font-size: 10pt;
background-color: #f3f3f3;
background: rgba(243, 243, 243, 0.941); /* #f3f3f3f0; */
}
.submit_buttons {
......@@ -583,9 +594,14 @@ dialog::backdrop {
padding: 8px;
}
form {
margin-left: 4px;
margin-right: 4px;
}
fieldset {
/* font-family:Georgia; */
background-color:#f3f3f3;
background-color: rgba(243, 243, 243, 0.627); /* #f3f3f3a0; */
border-radius:3px;
border:1px solid #ddd;
margin-left:auto;
......@@ -651,7 +667,7 @@ input[name="receive_symbol"] {
}
input[name="label"] {
width: 8em;
width: 9em;
}
input[name="font_size"] {
......@@ -662,6 +678,18 @@ input[name="startup_flags"] {
width: 16em;
}
/* All radios */
input[type="radio"] {
position: relative;
top: 2px;
}
/* All checkboxes */
input[type=checkbox] {
position: relative;
top: 2px;
}
/* Canvas dialog */
div.x-scale {
......@@ -731,13 +759,13 @@ div.y2 {
without becoming an order of magnitude more complex, do feel free... */
.prefs_tab_group {
display: table;
width: 90%;
width: 96%;
}
/* Configure the radio buttons to hide off-screen */
.prefs_tab {
position: absolute;
left:-100px;
left:-500px;
top:-100px;
}
......@@ -792,6 +820,13 @@ div.y2 {
height: 78vh;
}
#midi_in1, #midi_in2, #midi_in3, #midi_in4, #midi_in5,
#midi_in6, #midi_in7, #midi_in8, #midi_in9, #midi_in10,
#midi_out1, #midi_out2, #midi_out3, #midi_out4, #midi_out5,
#midi_out6, #midi_out7, #midi_out8, #midi_out9, #midi_out10 {
width: 205px;
}
.tab_settings {
padding-top: 8px;
}
......@@ -810,3 +845,68 @@ input[name="rate"] {
margin-bottom: -10px;
padding: 30px;
}
/* used for the custom dialog titlebar */
#titlebar {
width: 100%;
height: 20px;
margin-bottom: 4px;
-webkit-app-region: drag;
background-color: gray;
cursor: grab;
}
#titlebar_buttons {
top: 2px;
right: 2px;
text-align: right;
background-color: gray;
}
#titlebar_title {
color: white;
position: relative;
left: 1px;
top: 1px;
background-color: gray;
}
#titlebar_close_button {
width: 16px;
height: 16px;
background: #a2a2a2;
-webkit-app-region: no-drag;
color: #FFF;
font-size: 18px;
text-align: center;
line-height: 16px;
cursor: default;
}
/*#titlebar_close_button:after {
position: absolute;
right: 6px;
top: 1px;
content: "\d7";
font-size: 20px;
color: #FFF;
}*/
#titlebar_close_button:hover {
background: #b2b2b2;
}
#titlebar_close_button:active {
background: #e2e2e2;
}
input[type="color"] {
margin-bottom: 2px;
}
.foreground_color span,
.background_color span,
.label_color span {
position: relative;
bottom: 2px;
}
\ No newline at end of file
......@@ -5,10 +5,21 @@
<link id="page_style" rel="stylesheet" type="text/css" href="css/default.css">
<title>Canvas Dialog</title>
</head>
<body class="dialog_body">
<body class="dialog_body" style="overflow: hidden;">
<div class="container noselect">
<table id="titlebar">
<tr>
<td style="width: 100%;">
<div id="titlebar_title">Canvas Properties</div>
</td>
<td>
<div class="titlebar_buttons">
<div id="titlebar_close_button" onclick="cancel(false);">&#215</div>
</div>
</td>
</tr>
</table>
<form>
<fieldset class="canvas">
<legend data-i18n="canvas.prop.heading.gop"></legend>
......@@ -96,7 +107,7 @@
<fieldset class="canvas">
<legend data-i18n="canvas.prop.heading.data_scaling"></legend>
<div style="display: inline-block; align: left;">
<div style="display: inline-block; margin-right: -5px; width: 100%;">
<div class="x_scale prop hidden">
<nobr>
<label class="no_gop_opt" data-i18n="[title]canvas.prop.x_scale_tt">
......@@ -140,7 +151,6 @@
</label>
</div>
</div>
</div>
</fieldset>
......@@ -151,7 +161,7 @@
<select id="arrays_select" class="hidden"></select>
</label>
<div class="array-name prop">
<div class="array-name prop" style="margin-right: -5px;">
<label class="array-name"
data-i18n="[title]canvas.prop.array_name_tt">
<span data-i18n="canvas.prop.array_name"></span>
......@@ -187,7 +197,7 @@
</label>
<br/>
<span data-i18n="canvas.prop.array_style"></span>
<span style="position: relative; top: 4px;" data-i18n="canvas.prop.array_style"></span>
<br/>
<table class="array_style">
<tr>
......@@ -245,7 +255,7 @@
</table>
</div>
<div class="array-fill">
<div class="array-fill" style="margin-top: 2px;">
<label data-i18n="[title]canvas.prop.array_fill_tt">
<input onchange="update_array_attr(this);"
type="color"
......@@ -289,6 +299,7 @@
</label>
</div>
</fieldset>
</div>
<div class="submit_buttons">
<button type="button" id="ok_button" onClick="ok()" data-i18n="[title]iem.prop.ok_tt">
......@@ -620,9 +631,11 @@ function populate_array_form(objects) {
a_field = document.getElementById("arrays"),
opt, i;
a_field.classList.remove("hidden");
a_field.style.setProperty("height", "240px");
if (objects.length > 1) {
// show the select element if there's more than one array
arrays_select.classList.remove("hidden");
arrays_select.style.setProperty("margin", "0px 0px 5px 0px");
}
for (i = 0; i < objects.length; i++) {
opt = document.createElement("option");
......@@ -669,6 +682,7 @@ function register_window_id(gfxstub, attr_objects) {
// attr_objects[0]: canvas properties
// attr_objects[1...n-1]: array properties
add_events(gfxstub);
pdgui.gui_check_for_dialog_appearance_inconsistencies(gfxstub);
// not sure that we need this for properties windows...
// pdgui.canvas_map(gfxstub);
translate_form();
......@@ -690,7 +704,7 @@ function register_window_id(gfxstub, attr_objects) {
new_array_dialog = false; // this is a canvas/array props dialog
populate_form(attr_objects[0]);
}
init_arrays(pd_garray_attrs);
init_arrays(pd_garray_attrs);
// Disabling the menus does not yet work, so we hide that button for
// the moment
......
......@@ -3,14 +3,67 @@
<head>
<link id="page_style" rel="stylesheet" type="text/css" href="css/default.css">
</head>
<body class="dialog_body">
<style>
/* width */
::-webkit-scrollbar {
width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
background: rgba(0,0,0,0);
}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.267);
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #888;
}
input[type=checkbox] {
margin: 2px 0px 8px 0px;
}
input[type="text"] {
margin-bottom: 3px;
}
label {
margin-left: 0px;
margin-bottom: 1px;
}
</style>
<body class="dialog_body" style="overflow: hidden;">
<div class="container">
<table id="titlebar">
<tr>
<td style="width: 100%;">
<div id="titlebar_title">Data Object Properties</div>
</td>
<td>
<div class="titlebar_buttons">
<div id="titlebar_close_button" onclick="cancel(false);">&#215</div>
</div>
</td>
</tr>
</table>
<form>
<fieldset id="data_container">
<legend id="legend"></legend>
<fieldset id="data_container" style="height: 267px;">
<legend id="legend"></legend>
<div id="scrollable_data" style="overflow: auto; height: 250px;">
<table id="pairs" style="margin-right: 5px;">
</table>
</fieldset>
<div class="submit_buttons">
<div class="submit_buttons" style="
text-align: center;
padding: 8px 0px 8px 0px;"
>
<button type="button" onClick="ok()" data-i18n="[title]iem.prop.ok_tt">
<span data-i18n="iem.prop.ok"></span>
</button>
......@@ -27,6 +80,8 @@
var gui = require("nw.gui");
var pdgui = require("./pdgui.js");
//gui.Window.get().setResizable(false);
// For translations
var l = pdgui.get_local_string;
......@@ -146,12 +201,15 @@ function add_textarea_input(first_row) {
textarea = document.createElement("textarea"),
check_label = document.createElement("label"),
check = document.createElement("input"),
outer_container = document.getElementById("data_container"),
outer_container = document.getElementById("pairs"),
inner_container = document.createElement("div"),
br = document.createElement("br");
label.textContent = "vector fields";
inner_container.style.setProperty("display", "inline-block");
inner_container.style.setProperty("width", "100%");
label.style.setProperty("display", "block");
label.style.setProperty("text-align", "left");
textarea.style.setProperty("display", "block");
......@@ -159,7 +217,8 @@ function add_textarea_input(first_row) {
textarea.setAttribute("id", "vector_textarea");
textarea.setAttribute("rows", "4");
textarea.setAttribute("col", "5");
textarea.style.setProperty("width", "11.3em");
textarea.style.setProperty("width", "97.5%");
textarea.style.setProperty("resize", "none");
textarea.disabled = true;
check.type = "checkbox";
......@@ -181,7 +240,7 @@ function add_textarea_input(first_row) {
function add_text_input(field, left_column, first_row) {
var label = document.createElement("label"),
text_input = document.createElement("input"),
outer_container = document.getElementById("data_container"),
outer_container = document.getElementById("pairs"),
inner_container = document.createElement("div"),
br;
inner_container.style.setProperty("float", "left");
......@@ -190,6 +249,9 @@ function add_text_input(field, left_column, first_row) {
if (left_column && field.type !== "symbol") {
inner_container.style.setProperty("margin-right", "1em");
}
if (!left_column) {
inner_container.style.setProperty("float", "right");
}
label.textContent = field["var"];
text_input.type = "text";
text_input.classList.add("scalar_value");
......@@ -204,7 +266,7 @@ function add_text_input(field, left_column, first_row) {
text_input.style.setProperty("display", "block");
// Also in opposition to iemgui dialogs
text_input.style.setProperty("width",
field.type === "float" ? "5em" : "11.3em");
field.type === "float" ? "5em" : "97.5%");
// Some bottom margin
inner_container.style.setProperty("margin-bottom", "8px");
......@@ -301,6 +363,7 @@ function register_window_id(gfxstub, data_string) {
var head, tail, templates, data, data_separator;
pd_object_callback = gfxstub;
add_events(gfxstub);
pdgui.gui_check_for_dialog_appearance_inconsistencies(gfxstub);
// slice off the head of the message. This is where the templates
// for the data-- plus any templates for (nested) arrays-- are kept.
// We will keep the head intact for sending back to Pd since the user
......
......@@ -3,13 +3,66 @@
<head>
<link id="page_style" rel="stylesheet" type="text/css" href="css/default.css">
</head>
<body class="dialog_body">
<style>
/* width */
::-webkit-scrollbar {
width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
background: rgba(0,0,0,0);
}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.267);
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #888;
}
input[type=checkbox] {
margin: 2px 0px 8px 0px;
}
input[type="text"] {
margin-bottom: 3px;
}
label {
margin-left: 5px;
}
</style>
<body class="dialog_body" style="overflow: hidden;">
<div class="container">
<table id="titlebar">
<tr>
<td style="width: 100%; margin: 7px;">
<div id="titlebar_title">External Object Properties</div>
</td>
<td>
<div class="titlebar_buttons">
<div id="titlebar_close_button" onclick="cancel(false);">&#215</div>
</div>
</td>
</tr>
</table>
<form>
<fieldset>
<legend></legend>
<fieldset id="data_container" style="height: 267px;">
<legend></legend>
<div id="scrollable_data" style="overflow: auto; height: 250px;">
<table id="pairs">
</table>
</div>
</fieldset>
<div class="submit_buttons">
<div class="submit_buttons" style="
text-align: center;
padding: 8px 0px 8px 0px;"
>
<button type="button"
onClick="ok();"
id="ok_button"
......@@ -35,6 +88,8 @@
var gui = require("nw.gui");
var pdgui = require("./pdgui.js");
//gui.Window.get().setResizable(false);
// For translations
var l = pdgui.get_local_string;
......@@ -122,6 +177,7 @@ function register_window_id(gfxstub, args) {
var external_name = args.name,
array_of_objects;
pd_object_callback = gfxstub;
pdgui.gui_check_for_dialog_appearance_inconsistencies(gfxstub);
array_of_objects = parse_attrs(args.attributes);
// Store our array for later use
new_properties = array_of_objects;
......@@ -166,7 +222,7 @@ function get_input_type(t) {
}
function build_form(external_name, array_of_objects) {
var fieldset = document.querySelector("fieldset");
var fieldset = document.getElementById("pairs");
document.querySelector("legend").textContent = external_name;
array_of_objects.forEach(function(elem) {
var input_elem = document.createElement("input"),
......@@ -184,11 +240,15 @@ function build_form(external_name, array_of_objects) {
}
}
label.textContent = elem.label;
label.appendChild(input_elem);
fieldset.appendChild(label);
fieldset.appendChild(input_elem);
fieldset.appendChild(label);
// stop-gap until we make this prettier through css: insert a break
fieldset.appendChild(document.createElement("br"));
});
// update scrollbars
var parent_fieldset = document.getElementById("data_container");
fieldset.style.setProperty("height", (parseInt(parent_fieldset.style.getPropertyValue("height")) - 10) + "px");
}
function add_events(name) {
......
......@@ -3,8 +3,20 @@
<head>
<link id="page_style" rel="stylesheet" type="text/css" href="css/default.css">
</head>
<body class="dialog_body">
<body class="dialog_body" style="overflow: hidden;">
<div class="container">
<table id="titlebar">
<tr>
<td style="width: 100%;">
<div id="titlebar_title">Font Size</div>
</td>
<td>
<div class="titlebar_buttons">
<div id="titlebar_close_button" onclick="cancel(false);">&#215</div>
</div>
</td>
</tr>
</table>
<form>
<fieldset>
<legend data-i18n="font.prop.size"></legend>
......
......@@ -3,13 +3,25 @@
<head>
<link id="page_style" rel="stylesheet" type="text/css" href="css/default.css">
</head>
<body class="dialog_body">
<div class="container">
<body class="dialog_body" style="overflow: hidden;">
<div class="container noselect">
<table id="titlebar">
<tr>
<td style="width: 100%;">
<div id="titlebar_title">Atom Properties</div>
</td>
<td>
<div class="titlebar_buttons">
<div id="titlebar_close_button" onclick="cancel(false);">&#215</div>
</div>
</td>
</tr>
</table>
<form>
<fieldset>
<fieldset style="display: inline-block; margin-right: 4px;">
<legend id="dialog_header"></legend>
<table class="pairs">
<table class="pairs" style="display: inline-block; width: 232px;">
<tr class="width prop">
<td>
<label data-i18n="[title]gatom.prop.width_tt">
......@@ -109,15 +121,16 @@
<input class="label-pos"
type="radio"
id="labelpos_left"
id="labelpos_top"
value="2"