Commit c3c2f1be authored by user's avatar user
Browse files

cleaned up css, improved the gui preset interface

parent df9bd163
@font-face {
font-family: "DejaVu Sans Mono";
src: url("DejaVuSansMono.ttf");
}
body {
font-family:Verdana;
margin: 0px;
}
fieldset {
font-family:Georgia;
background-color:#eeeeee;
border-radius:3px;
border:2px solid black;
margin-left:auto;
margin-right:auto;
padding: 10px;
}
input[type="text"]{
width:3em;
}
input[type="number"]{
width:3em;
}
div.x-scale {
padding: 3px;
text-align: center;
}
div.gop-range {
}
div.y1 {
text-align: center;
padding: 3px;
}
div.x1 {
text-align: center;
padding: 3px;
}
div.y2 {
text-align: center;
padding: 3px;
}
.disabled {
color: #aaa;
}
.prop{
}
.hidden {
display: none;
}
.container{
display: none;
}
body {
}
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
text {
// fill: red;
cursor: default;
}
.selected_border {
stroke: blue;
stroke-dasharray: none;
stroke-width: 1;
}
label {
text-align: right;
// margin-right: auto;
// margin-left: auto;
}
.pair {
width: 75%;
text-align: left;
align: left;
}
.item1 {
width: 50%;
}
.item2 {
width: 50%;
}
input[name="x-offset"] {
width: 2em;
}
input[name="y-offset"] {
width: 2em;
}
input[name="send-symbol"] {
width: 8em;
}
input[name="receive-symbol"] {
width: 8em;
}
input[name="label"] {
width: 8em;
}
input[name="font-size"] {
width: 3em;
}
.submit_buttons {
text-align: center;
padding: 8px;
}
@font-face {
font-family: "DejaVu Sans Mono";
src: url("DejaVuSansMono.ttf");
}
body {
font-family:Verdana;
margin: 0px;
}
fieldset {
font-family:Georgia;
background-color:#eeeeee;
border-radius:3px;
border:2px solid black;
margin-left:auto;
margin-right:auto;
padding: 10px;
}
input[type="text"]{
width:3em;
}
input[type="number"]{
width:3em;
}
.prop{
}
.hidden {
display: none;
}
.container{
display: none;
}
body {
}
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
text {
// fill: red;
cursor: default;
}
.selected_border {
stroke: blue;
stroke-dasharray: none;
stroke-width: 1;
}
label {
text-align: right;
// margin-right: auto;
// margin-left: auto;
}
.pair {
width: 75%;
text-align: left;
align: left;
}
.item1 {
width: 50%;
}
.item2 {
width: 50%;
}
input[name="x-offset"] {
width: 2em;
}
input[name="y-offset"] {
width: 2em;
}
input[name="send-symbol"] {
width: 8em;
}
input[name="receive-symbol"] {
width: 8em;
}
input[name="label"] {
width: 8em;
}
input[name="font-size"] {
width: 3em;
}
.submit_buttons {
text-align: center;
padding: 8px;
}
......@@ -3,7 +3,7 @@
<head>
<link rel="stylesheet" type="text/css" href="dialog_iemgui.css">
</head>
<body>
<body id="iemgui_dialog_body">
<div class="container">
<form>
<fieldset>
......
......@@ -215,13 +215,18 @@
<label data-i18n="[title]prefs.gui.presets.gui_preset_tt">
<span data-i18n="prefs.gui.presets.gui_preset"></span>
</label>
<select id="gui_preset">
<option data-i18n="prefs.gui.presets.vanilla" value="0">
<select id="gui_preset" onchange="gui_preset_change(this);">
<option data-i18n="prefs.gui.presets.default" value="default">
</option>
<option data-i18n="prefs.gui.presets.extended" value="1">
<option data-i18n="prefs.gui.presets.vanilla" value="vanilla">
</option>
<option data-i18n="prefs.gui.presets.l2ork" value="2">
<option data-i18n="prefs.gui.presets.extended" value="extended">
</option>
<option data-i18n="prefs.gui.presets.l2ork" value="l2ork">
</option>
<option data-i18n="prefs.gui.presets.inverted" value="inverted">
</option>
</select>
</fieldset>
......@@ -271,6 +276,11 @@
this_elem.style.setProperty('display', 'inline');
}
function gui_preset_change(elem) {
pdgui.skin.set(elem.value);
}
function flag_change(elem) {
var attr, arrays_select, name, value, flag;
arrays_select = document.getElementById('arrays_select');
......
body {
margin: 0px;
}
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#console_controls {
background-color: LightGray;
height: 50px;
}
#control_frame {
padding: 12px;
}
#printout {
margin: 8px;
}
#bottom {
position: absolute;
top: 50px;
left: 0px;
right: 0px;
bottom: 0px;
overflow-y: scroll;
}
......@@ -3,7 +3,7 @@
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<body id="console_body">
<input style="display:none;" id="fileDialog" type="file" nwworkingdir multiple />
<div id="console_controls" class="noselect">
<div id="control_frame">
......@@ -529,7 +529,7 @@ function canvasNew(args) {
</script>
<input style="display:none;" id="saveDialog" type="file" nwsaveas />
<div id = "bottom">
<div id = "console_bottom">
<div id = "printout">
<pre id="p1" style="white-space: pre-wrap;">Welcome to Pd GUI using Node-Webkit
<script>document.write(process.versions['node-webkit'])</script><br/></pre>
......
......@@ -283,9 +283,11 @@
"presets": {
"gui_preset": "GUI preset",
"gui_preset_tt": "Collection of patch colors and styles",
"default": "default",
"vanilla": "Vanilla",
"extended": "Pd-Extended",
"l2ork": "Pd-L2ork"
"l2ork": "Pd-L2ork",
"inverted": "inverted"
}
},
"audio": {
......
@font-face {
font-family: "DejaVu Sans Mono";
src: url("DejaVuSansMono.ttf");
}
body {
margin: 0px;
font-family: "DejaVu Sans Mono";
}
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
text {
// fill: red;
cursor: default;
}
.selected_border {
stroke: blue;
stroke-dasharray: none;
stroke-width: 1;
}
/* a message when it flashes on a mouse-click */
.msg.flashed .border {
stroke-width: 4;
}
/* Border color for selected objects
In plain English:
Any element with a class 'border' that is contained inside
a parent element that is not in class 'gop' but is
in class 'selected' (whew!)
*/
:not(.gop).selected .border {
stroke: blue;
}
.selected_line {
stroke: blue;
}
.broken_border {
fill: #f7f7f7;
stroke: red;
stroke-dasharray: 3 2;
}
.xlet_control {
stroke: red;
fill: gray;
// stroke-width: 1;
}
.xlet_signal {
stroke: green;
fill: green;
stroke-width: 1;
}
.xlet_iemgui {
stroke: black;
fill: black;
stroke-width: 1;
}
.iemgui_label_selected {
fill: blue;
}
@-webkit-keyframes fizzle {
0% {
stroke-width: 1;
stroke-opacity: 1;
x: 0;
rx: 1;
ry: 1;
}
100% {
stroke-width: 20;
stroke-opacity: 0.2;
x: 100;
rx: 50;
ry: 50;
}
}
.xlet_selected {
stroke: purple !important;
-webkit-animation: fizzle 0.5s linear 1;
}
//.xlet:hover {
// stroke: red;
//}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="pd_canvas.css">
<link id="page_style" rel="stylesheet" type="text/css" href="css/default.css">
</head>
<body>
<body id="patch_body">
<input style="display:none;" id="fileDialog" type="file" multiple />
<input style="display:none;" id="saveDialog" type="file" nwsaveas nwworkingdir accept=".pd" />
......@@ -18,6 +18,9 @@
var nw = require('nw.gui');
var pdgui = require('./pdgui.js');
// Apply gui preset to this canvas
pdgui.skin.apply(this);
//var name = pdgui.last_loaded();
var l = pdgui.get_local_string;
......
@font-face {
font-family: "DejaVu Sans Mono";
src: url("DejaVuSansMono.ttf");
}
body {
margin: 0px;
font-family: "DejaVu Sans Mono";
}
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
text {
// fill: red;
cursor: default;
}
.selected_border {
stroke: blue;
stroke-dasharray: none;
stroke-width: 1;
}
.selected_line {
stroke: blue;
}
.broken_border {
fill: #f7f7f7;
stroke: red;
stroke-dasharray: 3 2;
}
.xlet_control {
stroke: red;
fill: gray;
// stroke-width: 1;
}
.xlet_signal {
stroke: green;
fill: green;
stroke-width: 1;
}
.xlet_iemgui {
stroke: black;
fill: black;
stroke-width: 1;
}
.iemgui_label_selected {
fill: blue;
}
@-webkit-keyframes fizzle {
0% {
stroke-width: 1;
stroke-opacity: 1;
x: 0;
rx: 1;
ry: 1;
}
100% {
stroke-width: 20;
stroke-opacity: 0.2;
x: 100;
rx: 50;
ry: 50;
}
}
.xlet_selected {
stroke: purple !important;
-webkit-animation: fizzle 0.5s linear 1;
}
//.xlet:hover {
// stroke: red;
//}
......@@ -174,7 +174,7 @@ function gui_post(string, color) {
var text = pd_window.document.createTextNode(string + "\n");
span.appendChild(text);
myp.appendChild(span);
var printout = pd_window.document.getElementById("bottom");
var printout = pd_window.document.getElementById("console_bottom");
printout.scrollTop = printout.scrollHeight;
last_string = string;
......@@ -3331,3 +3331,32 @@ function gui_midi_properties(gfxstub, sys_indevs, sys_outdevs,
);
}
}
// Let's try a closure for gui skins
exports.skin = (function () {
var dir = 'css/';
var preset = 'default';
var w;
function apply(win) {
win.window.document.getElementById('page_style')
.setAttribute('href', dir + preset + '.css');
}
return {
get: function () {
gui_post("getting preset: " + dir + preset + '.css');
return dir + preset + '.css';
},
set: function (name) {
preset = name;
gui_post("trying to set...");
for (w in patchwin) {
if (patchwin.hasOwnProperty(w)) {
apply(patchwin[w]);
}
}
},
apply: function (nw_window) {
apply(nw_window);
}
};
}());
@font-face {
font-family: "DejaVu Sans Mono";
src: url("DejaVuSansMono.ttf");
}
body {
font-family:Verdana;
margin: 0px;
}