tests: Run each test in a function
As the global object of a context is rooted, if we want the GC to act on these objects we need to take them out of the globals. https://bugzilla.gnome.org/show_bug.cgi?id=678737
This commit is contained in:
Jasper St. Pierre
parent
0d82ce5210
commit
c7196a519f
@ -6,96 +6,97 @@ const St = imports.gi.St;
|
||||
|
||||
const UI = imports.testcommon.ui;
|
||||
|
||||
let stage = new Clutter.Stage({ user_resizable: true, width: 1024, height: 768 });
|
||||
UI.init(stage);
|
||||
function test() {
|
||||
let stage = new Clutter.Stage({ user_resizable: true, width: 1024, height: 768 });
|
||||
UI.init(stage);
|
||||
|
||||
let vbox = new St.BoxLayout({ style: 'background: #ffee88;' });
|
||||
vbox.add_constraint(new Clutter.BindConstraint({ source: stage,
|
||||
coordinate: Clutter.BindCoordinate.SIZE }));
|
||||
stage.add_actor(vbox);
|
||||
let vbox = new St.BoxLayout({ style: 'background: #ffee88;' });
|
||||
vbox.add_constraint(new Clutter.BindConstraint({ source: stage,
|
||||
coordinate: Clutter.BindCoordinate.SIZE }));
|
||||
stage.add_actor(vbox);
|
||||
|
||||
let scroll = new St.ScrollView();
|
||||
vbox.add(scroll, { expand: true });
|
||||
let scroll = new St.ScrollView();
|
||||
vbox.add(scroll, { expand: true });
|
||||
|
||||
let vbox = new St.BoxLayout({ vertical: true,
|
||||
style: 'padding: 10px;'
|
||||
+ 'spacing: 20px;' });
|
||||
scroll.add_actor(vbox);
|
||||
let vbox = new St.BoxLayout({ vertical: true,
|
||||
style: 'padding: 10px;'
|
||||
+ 'spacing: 20px;' });
|
||||
scroll.add_actor(vbox);
|
||||
|
||||
let tbox = null;
|
||||
let tbox = null;
|
||||
|
||||
function addTestCase(image, size, backgroundSize, useCairo) {
|
||||
// Using a border in CSS forces cairo rendering.
|
||||
// To get a border using cogl, we paint a border using
|
||||
// paint signal hacks.
|
||||
function addTestCase(image, size, backgroundSize, useCairo) {
|
||||
// Using a border in CSS forces cairo rendering.
|
||||
// To get a border using cogl, we paint a border using
|
||||
// paint signal hacks.
|
||||
|
||||
let obin = new St.Bin();
|
||||
if (useCairo)
|
||||
obin.style = 'border: 3px solid green;';
|
||||
else
|
||||
obin.connect_after('paint', function(actor) {
|
||||
Cogl.set_source_color4f(0, 1, 0, 1);
|
||||
let obin = new St.Bin();
|
||||
if (useCairo)
|
||||
obin.style = 'border: 3px solid green;';
|
||||
else
|
||||
obin.connect_after('paint', function(actor) {
|
||||
Cogl.set_source_color4f(0, 1, 0, 1);
|
||||
|
||||
let geom = actor.get_allocation_geometry();
|
||||
let width = 3;
|
||||
let geom = actor.get_allocation_geometry();
|
||||
let width = 3;
|
||||
|
||||
// clockwise order
|
||||
Cogl.rectangle(0, 0, geom.width, width);
|
||||
Cogl.rectangle(geom.width - width, width,
|
||||
geom.width, geom.height);
|
||||
Cogl.rectangle(0, geom.height,
|
||||
geom.width - width, geom.height - width);
|
||||
Cogl.rectangle(0, geom.height - width,
|
||||
width, width);
|
||||
});
|
||||
tbox.add(obin);
|
||||
// clockwise order
|
||||
Cogl.rectangle(0, 0, geom.width, width);
|
||||
Cogl.rectangle(geom.width - width, width,
|
||||
geom.width, geom.height);
|
||||
Cogl.rectangle(0, geom.height,
|
||||
geom.width - width, geom.height - width);
|
||||
Cogl.rectangle(0, geom.height - width,
|
||||
width, width);
|
||||
});
|
||||
tbox.add(obin);
|
||||
|
||||
let [width, height] = size;
|
||||
let bin = new St.Bin({ style_class: 'background-image-' + image,
|
||||
width: width,
|
||||
height: height,
|
||||
style: 'border: 1px solid transparent;'
|
||||
+ 'background-size: ' + backgroundSize + ';',
|
||||
x_fill: true,
|
||||
y_fill: true
|
||||
});
|
||||
obin.set_child(bin);
|
||||
let [width, height] = size;
|
||||
let bin = new St.Bin({ style_class: 'background-image-' + image,
|
||||
width: width,
|
||||
height: height,
|
||||
style: 'border: 1px solid transparent;'
|
||||
+ 'background-size: ' + backgroundSize + ';',
|
||||
x_fill: true,
|
||||
y_fill: true
|
||||
});
|
||||
obin.set_child(bin);
|
||||
|
||||
bin.set_child(new St.Label({ text: backgroundSize + (useCairo ? ' (cairo)' : ' (cogl)'),
|
||||
style: 'font-size: 15px;'
|
||||
+ 'text-align: center;'
|
||||
}));
|
||||
bin.set_child(new St.Label({ text: backgroundSize + (useCairo ? ' (cairo)' : ' (cogl)'),
|
||||
style: 'font-size: 15px;'
|
||||
+ 'text-align: center;'
|
||||
}));
|
||||
}
|
||||
|
||||
function addTestLine(image, size, useCairo) {
|
||||
const backgroundSizes = ["auto", "contain", "cover", "200px 200px", "100px 100px", "100px 200px"];
|
||||
|
||||
let [width, height] = size;
|
||||
vbox.add(new St.Label({ text: image + '.svg / ' + width + '×' + height,
|
||||
style: 'font-size: 15px;'
|
||||
+ 'text-align: center;'
|
||||
}));
|
||||
|
||||
tbox = new St.BoxLayout({ style: 'spacing: 20px;' });
|
||||
vbox.add(tbox);
|
||||
|
||||
for each (let s in backgroundSizes)
|
||||
addTestCase(image, size, s, false);
|
||||
for each (let s in backgroundSizes)
|
||||
addTestCase(image, size, s, true);
|
||||
}
|
||||
|
||||
function addTestImage(image) {
|
||||
const containerSizes = [[100, 100], [200, 200], [250, 250], [100, 250], [250, 100]];
|
||||
|
||||
for each (let size in containerSizes)
|
||||
addTestLine(image, size);
|
||||
}
|
||||
|
||||
addTestImage ('200-200');
|
||||
addTestImage ('200-100');
|
||||
addTestImage ('100-200');
|
||||
|
||||
UI.main(stage);
|
||||
}
|
||||
|
||||
function addTestLine(image, size, useCairo) {
|
||||
const backgroundSizes = ["auto", "contain", "cover", "200px 200px", "100px 100px", "100px 200px"];
|
||||
|
||||
let [width, height] = size;
|
||||
vbox.add(new St.Label({ text: image + '.svg / ' + width + '×' + height,
|
||||
style: 'font-size: 15px;'
|
||||
+ 'text-align: center;'
|
||||
}));
|
||||
|
||||
tbox = new St.BoxLayout({ style: 'spacing: 20px;' });
|
||||
vbox.add(tbox);
|
||||
|
||||
for each (let s in backgroundSizes)
|
||||
addTestCase(image, size, s, false);
|
||||
for each (let s in backgroundSizes)
|
||||
addTestCase(image, size, s, true);
|
||||
}
|
||||
|
||||
function addTestImage(image) {
|
||||
const containerSizes = [[100, 100], [200, 200], [250, 250], [100, 250], [250, 100]];
|
||||
|
||||
for each (let size in containerSizes)
|
||||
addTestLine(image, size);
|
||||
}
|
||||
|
||||
addTestImage ('200-200');
|
||||
addTestImage ('200-100');
|
||||
addTestImage ('100-200');
|
||||
|
||||
stage.show();
|
||||
Clutter.main();
|
||||
stage.destroy();
|
||||
test();
|
||||
|
||||
@ -5,57 +5,58 @@ const St = imports.gi.St;
|
||||
|
||||
const UI = imports.testcommon.ui;
|
||||
|
||||
let stage = new Clutter.Stage({ width: 640, height: 480 });
|
||||
UI.init(stage);
|
||||
function test() {
|
||||
let stage = new Clutter.Stage({ width: 640, height: 480 });
|
||||
UI.init(stage);
|
||||
|
||||
let vbox = new St.BoxLayout({ width: stage.width,
|
||||
height: stage.height,
|
||||
style: 'background: #ffee88;' });
|
||||
stage.add_actor(vbox);
|
||||
let vbox = new St.BoxLayout({ width: stage.width,
|
||||
height: stage.height,
|
||||
style: 'background: #ffee88;' });
|
||||
stage.add_actor(vbox);
|
||||
|
||||
let scroll = new St.ScrollView();
|
||||
vbox.add(scroll, { expand: true });
|
||||
let scroll = new St.ScrollView();
|
||||
vbox.add(scroll, { expand: true });
|
||||
|
||||
let box = new St.BoxLayout({ vertical: true,
|
||||
style: 'padding: 10px;'
|
||||
+ 'spacing: 20px;' });
|
||||
scroll.add_actor(box);
|
||||
let box = new St.BoxLayout({ vertical: true,
|
||||
style: 'padding: 10px;'
|
||||
+ 'spacing: 20px;' });
|
||||
scroll.add_actor(box);
|
||||
|
||||
function addTestCase(radii, useGradient) {
|
||||
let background;
|
||||
if (useGradient)
|
||||
background = 'background-gradient-direction: vertical;'
|
||||
+ 'background-gradient-start: white;'
|
||||
+ 'background-gradient-end: gray;';
|
||||
else
|
||||
background = 'background: white;';
|
||||
function addTestCase(radii, useGradient) {
|
||||
let background;
|
||||
if (useGradient)
|
||||
background = 'background-gradient-direction: vertical;'
|
||||
+ 'background-gradient-start: white;'
|
||||
+ 'background-gradient-end: gray;';
|
||||
else
|
||||
background = 'background: white;';
|
||||
|
||||
box.add(new St.Label({ text: "border-radius: " + radii + ";",
|
||||
style: 'border: 1px solid black; '
|
||||
+ 'border-radius: ' + radii + ';'
|
||||
+ 'padding: 5px;' + background }),
|
||||
{ x_fill: false });
|
||||
box.add(new St.Label({ text: "border-radius: " + radii + ";",
|
||||
style: 'border: 1px solid black; '
|
||||
+ 'border-radius: ' + radii + ';'
|
||||
+ 'padding: 5px;' + background }),
|
||||
{ x_fill: false });
|
||||
}
|
||||
|
||||
// uniform backgrounds
|
||||
addTestCase(" 0px 5px 10px 15px", false);
|
||||
addTestCase(" 5px 10px 15px 0px", false);
|
||||
addTestCase("10px 15px 0px 5px", false);
|
||||
addTestCase("15px 0px 5px 10px", false);
|
||||
|
||||
// gradient backgrounds
|
||||
addTestCase(" 0px 5px 10px 15px", true);
|
||||
addTestCase(" 5px 10px 15px 0px", true);
|
||||
addTestCase("10px 15px 0px 5px", true);
|
||||
addTestCase("15px 0px 5px 10px", true);
|
||||
|
||||
// border-radius reduction
|
||||
// these should all take the cairo fallback,
|
||||
// so don't bother testing w/ or w/out gradients.
|
||||
addTestCase("200px 200px 200px 200px", false);
|
||||
addTestCase("200px 200px 0px 200px", false);
|
||||
addTestCase("999px 0px 999px 0px", false);
|
||||
|
||||
UI.main(stage);
|
||||
}
|
||||
|
||||
// uniform backgrounds
|
||||
addTestCase(" 0px 5px 10px 15px", false);
|
||||
addTestCase(" 5px 10px 15px 0px", false);
|
||||
addTestCase("10px 15px 0px 5px", false);
|
||||
addTestCase("15px 0px 5px 10px", false);
|
||||
|
||||
// gradient backgrounds
|
||||
addTestCase(" 0px 5px 10px 15px", true);
|
||||
addTestCase(" 5px 10px 15px 0px", true);
|
||||
addTestCase("10px 15px 0px 5px", true);
|
||||
addTestCase("15px 0px 5px 10px", true);
|
||||
|
||||
// border-radius reduction
|
||||
// these should all take the cairo fallback,
|
||||
// so don't bother testing w/ or w/out gradients.
|
||||
addTestCase("200px 200px 200px 200px", false);
|
||||
addTestCase("200px 200px 0px 200px", false);
|
||||
addTestCase("999px 0px 999px 0px", false);
|
||||
|
||||
stage.show();
|
||||
Clutter.main();
|
||||
stage.destroy();
|
||||
test();
|
||||
|
||||
@ -5,54 +5,55 @@ const St = imports.gi.St;
|
||||
|
||||
const UI = imports.testcommon.ui;
|
||||
|
||||
let stage = new Clutter.Stage({ width: 640, height: 480 });
|
||||
UI.init(stage);
|
||||
function test() {
|
||||
let stage = new Clutter.Stage({ width: 640, height: 480 });
|
||||
UI.init(stage);
|
||||
|
||||
let vbox = new St.BoxLayout({ width: stage.width,
|
||||
height: stage.height,
|
||||
style: 'padding: 10px; background: #ffee88;'
|
||||
});
|
||||
stage.add_actor(vbox);
|
||||
let vbox = new St.BoxLayout({ width: stage.width,
|
||||
height: stage.height,
|
||||
style: 'padding: 10px; background: #ffee88;'
|
||||
});
|
||||
stage.add_actor(vbox);
|
||||
|
||||
let scroll = new St.ScrollView();
|
||||
vbox.add(scroll, { expand: true });
|
||||
let scroll = new St.ScrollView();
|
||||
vbox.add(scroll, { expand: true });
|
||||
|
||||
let box = new St.BoxLayout({ vertical: true,
|
||||
style: 'spacing: 20px;' });
|
||||
scroll.add_actor(box);
|
||||
let box = new St.BoxLayout({ vertical: true,
|
||||
style: 'spacing: 20px;' });
|
||||
scroll.add_actor(box);
|
||||
|
||||
function addTestCase(borders, useGradient) {
|
||||
let background;
|
||||
if (useGradient)
|
||||
background = 'background-gradient-direction: vertical;'
|
||||
+ 'background-gradient-start: white;'
|
||||
+ 'background-gradient-end: gray;';
|
||||
else
|
||||
background = 'background: white;';
|
||||
function addTestCase(borders, useGradient) {
|
||||
let background;
|
||||
if (useGradient)
|
||||
background = 'background-gradient-direction: vertical;'
|
||||
+ 'background-gradient-start: white;'
|
||||
+ 'background-gradient-end: gray;';
|
||||
else
|
||||
background = 'background: white;';
|
||||
|
||||
let border_style = "border-top: " + borders[St.Side.TOP] + " solid black;\n" +
|
||||
"border-right: " + borders[St.Side.RIGHT] + " solid black;\n" +
|
||||
"border-bottom: " + borders[St.Side.BOTTOM] + " solid black;\n" +
|
||||
"border-left: " + borders[St.Side.LEFT] + " solid black;";
|
||||
box.add(new St.Label({ text: border_style,
|
||||
style: border_style
|
||||
+ 'border-radius: 0px 5px 15px 25px;'
|
||||
+ 'padding: 5px;' + background }),
|
||||
{ x_fill: false });
|
||||
let border_style = "border-top: " + borders[St.Side.TOP] + " solid black;\n" +
|
||||
"border-right: " + borders[St.Side.RIGHT] + " solid black;\n" +
|
||||
"border-bottom: " + borders[St.Side.BOTTOM] + " solid black;\n" +
|
||||
"border-left: " + borders[St.Side.LEFT] + " solid black;";
|
||||
box.add(new St.Label({ text: border_style,
|
||||
style: border_style
|
||||
+ 'border-radius: 0px 5px 15px 25px;'
|
||||
+ 'padding: 5px;' + background }),
|
||||
{ x_fill: false });
|
||||
}
|
||||
|
||||
// uniform backgrounds
|
||||
addTestCase([" 0px", " 5px", "10px", "15px"], false);
|
||||
addTestCase([" 5px", "10px", "15px", " 0px"], false);
|
||||
addTestCase(["10px", "15px", " 0px", " 5px"], false);
|
||||
addTestCase(["15px", " 0px", " 5px", "10px"], false);
|
||||
|
||||
// gradient backgrounds
|
||||
addTestCase([" 0px", " 5px", "10px", "15px"], true);
|
||||
addTestCase([" 5px", "10px", "15px", " 0px"], true);
|
||||
addTestCase(["10px", "15px", " 0px", " 5px"], true);
|
||||
addTestCase(["15px", " 0px", " 5px", "10px"], true);
|
||||
|
||||
UI.main(stage);
|
||||
}
|
||||
|
||||
// uniform backgrounds
|
||||
addTestCase([" 0px", " 5px", "10px", "15px"], false);
|
||||
addTestCase([" 5px", "10px", "15px", " 0px"], false);
|
||||
addTestCase(["10px", "15px", " 0px", " 5px"], false);
|
||||
addTestCase(["15px", " 0px", " 5px", "10px"], false);
|
||||
|
||||
// gradient backgrounds
|
||||
addTestCase([" 0px", " 5px", "10px", "15px"], true);
|
||||
addTestCase([" 5px", "10px", "15px", " 0px"], true);
|
||||
addTestCase(["10px", "15px", " 0px", " 5px"], true);
|
||||
addTestCase(["15px", " 0px", " 5px", "10px"], true);
|
||||
|
||||
stage.show();
|
||||
Clutter.main();
|
||||
stage.destroy();
|
||||
test();
|
||||
|
||||
@ -5,129 +5,131 @@ const St = imports.gi.St;
|
||||
|
||||
const UI = imports.testcommon.ui;
|
||||
|
||||
let stage = new Clutter.Stage({ width: 640, height: 480 });
|
||||
UI.init(stage);
|
||||
function test() {
|
||||
let stage = new Clutter.Stage({ width: 640, height: 480 });
|
||||
UI.init(stage);
|
||||
|
||||
let vbox = new St.BoxLayout({ width: stage.width,
|
||||
height: stage.height,
|
||||
style: 'background: #ffee88;' });
|
||||
stage.add_actor(vbox);
|
||||
let vbox = new St.BoxLayout({ width: stage.width,
|
||||
height: stage.height,
|
||||
style: 'background: #ffee88;' });
|
||||
stage.add_actor(vbox);
|
||||
|
||||
let scroll = new St.ScrollView();
|
||||
vbox.add(scroll, { expand: true });
|
||||
let scroll = new St.ScrollView();
|
||||
vbox.add(scroll, { expand: true });
|
||||
|
||||
let box = new St.BoxLayout({ vertical: true,
|
||||
style: 'padding: 10px;'
|
||||
+ 'spacing: 20px;' });
|
||||
scroll.add_actor(box);
|
||||
let box = new St.BoxLayout({ vertical: true,
|
||||
style: 'padding: 10px;'
|
||||
+ 'spacing: 20px;' });
|
||||
scroll.add_actor(box);
|
||||
|
||||
box.add(new St.Label({ text: "Hello World",
|
||||
style: 'border: 1px solid black; '
|
||||
+ 'padding: 5px;' }));
|
||||
box.add(new St.Label({ text: "Hello World",
|
||||
style: 'border: 1px solid black; '
|
||||
+ 'padding: 5px;' }));
|
||||
|
||||
box.add(new St.Label({ text: "Hello Round World",
|
||||
style: 'border: 3px solid green; '
|
||||
+ 'border-radius: 8px; '
|
||||
+ 'padding: 5px;' }));
|
||||
box.add(new St.Label({ text: "Hello Round World",
|
||||
style: 'border: 3px solid green; '
|
||||
+ 'border-radius: 8px; '
|
||||
+ 'padding: 5px;' }));
|
||||
|
||||
box.add(new St.Label({ text: "Hello Background",
|
||||
style: 'border: 3px solid green; '
|
||||
+ 'border-radius: 8px; '
|
||||
+ 'background: white; '
|
||||
+ 'padding: 5px;' }));
|
||||
box.add(new St.Label({ text: "Hello Background",
|
||||
style: 'border: 3px solid green; '
|
||||
+ 'border-radius: 8px; '
|
||||
+ 'background: white; '
|
||||
+ 'padding: 5px;' }));
|
||||
|
||||
box.add(new St.Label({ text: "Hello Translucent Black Border",
|
||||
style: 'border: 3px solid rgba(0, 0, 0, 0.4); '
|
||||
+ 'background: white; ' }));
|
||||
box.add(new St.Label({ text: "Hello Translucent Black Border",
|
||||
style: 'border: 3px solid rgba(0, 0, 0, 0.4); '
|
||||
+ 'background: white; ' }));
|
||||
|
||||
box.add(new St.Label({ text: "Hello Translucent Background",
|
||||
style: 'background: rgba(255, 255, 255, 0.3);' }));
|
||||
box.add(new St.Label({ text: "Hello Translucent Background",
|
||||
style: 'background: rgba(255, 255, 255, 0.3);' }));
|
||||
|
||||
box.add(new St.Label({ text: "Border, Padding, Content: 20px" }));
|
||||
box.add(new St.Label({ text: "Border, Padding, Content: 20px" }));
|
||||
|
||||
let b1 = new St.BoxLayout({ vertical: true,
|
||||
style: 'border: 20px solid black; '
|
||||
+ 'background: white; '
|
||||
+ 'padding: 20px;' });
|
||||
box.add(b1);
|
||||
let b1 = new St.BoxLayout({ vertical: true,
|
||||
style: 'border: 20px solid black; '
|
||||
+ 'background: white; '
|
||||
+ 'padding: 20px;' });
|
||||
box.add(b1);
|
||||
|
||||
b1.add(new St.BoxLayout({ width: 20, height: 20,
|
||||
style: 'background: black' }));
|
||||
b1.add(new St.BoxLayout({ width: 20, height: 20,
|
||||
style: 'background: black' }));
|
||||
|
||||
box.add(new St.Label({ text: "Translucent big blue border, with rounding",
|
||||
style: 'border: 20px solid rgba(0, 0, 255, 0.2); '
|
||||
+ 'border-radius: 10px; '
|
||||
+ 'background: white; '
|
||||
+ 'padding: 10px;' }));
|
||||
box.add(new St.Label({ text: "Translucent big blue border, with rounding",
|
||||
style: 'border: 20px solid rgba(0, 0, 255, 0.2); '
|
||||
+ 'border-radius: 10px; '
|
||||
+ 'background: white; '
|
||||
+ 'padding: 10px;' }));
|
||||
|
||||
box.add(new St.Label({ text: "Transparent border",
|
||||
style: 'border: 20px solid transparent; '
|
||||
+ 'background: white; '
|
||||
+ 'padding: 10px;' }));
|
||||
box.add(new St.Label({ text: "Transparent border",
|
||||
style: 'border: 20px solid transparent; '
|
||||
+ 'background: white; '
|
||||
+ 'padding: 10px;' }));
|
||||
|
||||
box.add(new St.Label({ text: "Border Image",
|
||||
style_class: "border-image",
|
||||
style: "padding: 10px;" }));
|
||||
box.add(new St.Label({ text: "Border Image",
|
||||
style_class: "border-image",
|
||||
style: "padding: 10px;" }));
|
||||
|
||||
box.add(new St.Label({ text: "Border Image with Gradient",
|
||||
style_class: 'border-image-with-background-gradient',
|
||||
style: "padding: 10px;"
|
||||
+ 'background-gradient-direction: vertical;' }));
|
||||
box.add(new St.Label({ text: "Border Image with Gradient",
|
||||
style_class: 'border-image-with-background-gradient',
|
||||
style: "padding: 10px;"
|
||||
+ 'background-gradient-direction: vertical;' }));
|
||||
|
||||
box.add(new St.Label({ text: "Rounded, framed, shadowed gradients" }));
|
||||
box.add(new St.Label({ text: "Rounded, framed, shadowed gradients" }));
|
||||
|
||||
let framedGradients = new St.BoxLayout({ vertical: false,
|
||||
style: 'padding: 10px; spacing: 12px;' });
|
||||
box.add(framedGradients);
|
||||
let framedGradients = new St.BoxLayout({ vertical: false,
|
||||
style: 'padding: 10px; spacing: 12px;' });
|
||||
box.add(framedGradients);
|
||||
|
||||
function addGradientCase(direction, borderWidth, borderRadius, extra) {
|
||||
let gradientBox = new St.BoxLayout({ style_class: 'background-gradient',
|
||||
style: 'border: ' + borderWidth + 'px solid #8b0000;'
|
||||
+ 'border-radius: ' + borderRadius + 'px;'
|
||||
+ 'background-gradient-direction: ' + direction + ';'
|
||||
+ 'width: 32px;'
|
||||
+ 'height: 32px;'
|
||||
+ extra });
|
||||
framedGradients.add(gradientBox, { x_fill: false, y_fill: false } );
|
||||
}
|
||||
|
||||
addGradientCase ('horizontal', 0, 5, 'box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);');
|
||||
addGradientCase ('horizontal', 2, 5, 'box-shadow: 0px 2px 0px 0px rgba(0,255,0,0.5);');
|
||||
addGradientCase ('horizontal', 5, 2, 'box-shadow: 2px 0px 0px 0px rgba(0,0,255,0.5);');
|
||||
addGradientCase ('horizontal', 5, 20, 'box-shadow: 0px 0px 4px 0px rgba(255,0,0,0.5);');
|
||||
addGradientCase ('vertical', 0, 5, 'box-shadow: 0px 0px 0px 4px rgba(0,0,0,0.5);');
|
||||
addGradientCase ('vertical', 2, 5, 'box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.5);');
|
||||
addGradientCase ('vertical', 5, 2, 'box-shadow: -2px -2px 6px 0px rgba(0,0,0,0.5);');
|
||||
addGradientCase ('vertical', 5, 20, 'box-shadow: -2px -2px 0px 6px rgba(0,0,0,0.5);');
|
||||
|
||||
box.add(new St.Label({ text: "Rounded, framed, shadowed images" }));
|
||||
|
||||
let framedImages = new St.BoxLayout({ vertical: false,
|
||||
style: 'padding: 10px; spacing: 6px;' });
|
||||
box.add(framedImages);
|
||||
|
||||
function addBackgroundImageCase(borderWidth, borderRadius, width, height, extra) {
|
||||
let imageBox = new St.BoxLayout({ style_class: 'background-image',
|
||||
style: 'border: ' + borderWidth + 'px solid #8b8b8b;'
|
||||
function addGradientCase(direction, borderWidth, borderRadius, extra) {
|
||||
let gradientBox = new St.BoxLayout({ style_class: 'background-gradient',
|
||||
style: 'border: ' + borderWidth + 'px solid #8b0000;'
|
||||
>>>>>>> 2aff593... tests: Run each test in a function
|
||||
+ 'border-radius: ' + borderRadius + 'px;'
|
||||
+ 'width: ' + width + 'px;'
|
||||
+ 'height: ' + height + 'px;'
|
||||
+ 'background-gradient-direction: ' + direction + ';'
|
||||
+ 'width: 32px;'
|
||||
+ 'height: 32px;'
|
||||
+ extra });
|
||||
framedImages.add(imageBox, { x_fill: false, y_fill: false } );
|
||||
framedGradients.add(gradientBox, { x_fill: false, y_fill: false } );
|
||||
}
|
||||
|
||||
addGradientCase ('horizontal', 0, 5, 'box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);');
|
||||
addGradientCase ('horizontal', 2, 5, 'box-shadow: 0px 2px 0px 0px rgba(0,255,0,0.5);');
|
||||
addGradientCase ('horizontal', 5, 2, 'box-shadow: 2px 0px 0px 0px rgba(0,0,255,0.5);');
|
||||
addGradientCase ('horizontal', 5, 20, 'box-shadow: 0px 0px 4px 0px rgba(255,0,0,0.5);');
|
||||
addGradientCase ('vertical', 0, 5, 'box-shadow: 0px 0px 0px 4px rgba(0,0,0,0.5);');
|
||||
addGradientCase ('vertical', 2, 5, 'box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.5);');
|
||||
addGradientCase ('vertical', 5, 2, 'box-shadow: -2px -2px 6px 0px rgba(0,0,0,0.5);');
|
||||
addGradientCase ('vertical', 5, 20, 'box-shadow: -2px -2px 0px 6px rgba(0,0,0,0.5);');
|
||||
|
||||
box.add(new St.Label({ text: "Rounded, framed, shadowed images" }));
|
||||
|
||||
let framedImages = new St.BoxLayout({ vertical: false,
|
||||
style: 'padding: 10px; spacing: 6px;' });
|
||||
box.add(framedImages);
|
||||
|
||||
function addBackgroundImageCase(borderWidth, borderRadius, width, height, extra) {
|
||||
let imageBox = new St.BoxLayout({ style_class: 'background-image',
|
||||
style: 'border: ' + borderWidth + 'px solid #8b8b8b;'
|
||||
+ 'border-radius: ' + borderRadius + 'px;'
|
||||
+ 'width: ' + width + 'px;'
|
||||
+ 'height: ' + height + 'px;'
|
||||
+ extra });
|
||||
framedImages.add(imageBox, { x_fill: false, y_fill: false } );
|
||||
}
|
||||
|
||||
addBackgroundImageCase (0, 0, 32, 32, 'background-position: 2px 5px');
|
||||
addBackgroundImageCase (0, 0, 16, 16, '-st-background-image-shadow: 1px 1px 4px 0px rgba(0,0,0,0.5); background-color: rgba(0,0,0,0)');
|
||||
addBackgroundImageCase (0, 5, 32, 32, '-st-background-image-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);');
|
||||
addBackgroundImageCase (2, 5, 32, 32, '-st-background-image-shadow: 0px 2px 0px 0px rgba(0,255,0,0.5);');
|
||||
addBackgroundImageCase (5, 2, 32, 32, '-st-background-image-shadow: 2px 0px 0px 0px rgba(0,0,255,0.5);');
|
||||
addBackgroundImageCase (5, 20, 32, 32, '-st-background-image-shadow: 0px 0px 4px 0px rgba(255,0,0,0.5);');
|
||||
addBackgroundImageCase (0, 5, 48, 48, '-st-background-image-shadow: 0px 0px 0px 4px rgba(0,0,0,0.5);');
|
||||
addBackgroundImageCase (5, 5, 48, 48, '-st-background-image-shadow: 0px 0px 4px 4px rgba(0,0,0,0.5);');
|
||||
addBackgroundImageCase (0, 5, 64, 64, '-st-background-image-shadow: -2px -2px 6px 0px rgba(0,0,0,0.5);');
|
||||
addBackgroundImageCase (5, 5, 64, 64, '-st-background-image-shadow: -2px -2px 0px 6px rgba(0,0,0,0.5);');
|
||||
addBackgroundImageCase (0, 5, 32, 32, 'background-position: 2px 5px');
|
||||
|
||||
UI.main(stage);
|
||||
}
|
||||
|
||||
addBackgroundImageCase (0, 0, 32, 32, 'background-position: 2px 5px');
|
||||
addBackgroundImageCase (0, 0, 16, 16, '-st-background-image-shadow: 1px 1px 4px 0px rgba(0,0,0,0.5); background-color: rgba(0,0,0,0)');
|
||||
addBackgroundImageCase (0, 5, 32, 32, '-st-background-image-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);');
|
||||
addBackgroundImageCase (2, 5, 32, 32, '-st-background-image-shadow: 0px 2px 0px 0px rgba(0,255,0,0.5);');
|
||||
addBackgroundImageCase (5, 2, 32, 32, '-st-background-image-shadow: 2px 0px 0px 0px rgba(0,0,255,0.5);');
|
||||
addBackgroundImageCase (5, 20, 32, 32, '-st-background-image-shadow: 0px 0px 4px 0px rgba(255,0,0,0.5);');
|
||||
addBackgroundImageCase (0, 5, 48, 48, '-st-background-image-shadow: 0px 0px 0px 4px rgba(0,0,0,0.5);');
|
||||
addBackgroundImageCase (5, 5, 48, 48, '-st-background-image-shadow: 0px 0px 4px 4px rgba(0,0,0,0.5);');
|
||||
addBackgroundImageCase (0, 5, 64, 64, '-st-background-image-shadow: -2px -2px 6px 0px rgba(0,0,0,0.5);');
|
||||
addBackgroundImageCase (5, 5, 64, 64, '-st-background-image-shadow: -2px -2px 0px 6px rgba(0,0,0,0.5);');
|
||||
addBackgroundImageCase (0, 5, 32, 32, 'background-position: 2px 5px');
|
||||
|
||||
stage.show();
|
||||
Clutter.main();
|
||||
stage.destroy();
|
||||
test();
|
||||
|
||||
@ -5,88 +5,87 @@ const St = imports.gi.St;
|
||||
|
||||
const UI = imports.testcommon.ui;
|
||||
|
||||
let stage = new Clutter.Stage();
|
||||
UI.init(stage);
|
||||
function test() {
|
||||
let stage = new Clutter.Stage();
|
||||
UI.init(stage);
|
||||
|
||||
let vbox = new St.BoxLayout({ vertical: true,
|
||||
width: stage.width,
|
||||
height: stage.height,
|
||||
style: 'padding: 10px;'
|
||||
+ 'spacing: 10px;' });
|
||||
stage.add_actor(vbox);
|
||||
let vbox = new St.BoxLayout({ vertical: true,
|
||||
width: stage.width,
|
||||
height: stage.height,
|
||||
style: 'padding: 10px;'
|
||||
+ 'spacing: 10px;' });
|
||||
stage.add_actor(vbox);
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
let colored_boxes = new St.BoxLayout({ vertical: true,
|
||||
width: 200,
|
||||
height: 200,
|
||||
style: 'border: 2px solid black;' });
|
||||
vbox.add(colored_boxes, { x_fill: false,
|
||||
x_align: St.Align.MIDDLE });
|
||||
let colored_boxes = new St.BoxLayout({ vertical: true,
|
||||
width: 200,
|
||||
height: 200,
|
||||
style: 'border: 2px solid black;' });
|
||||
vbox.add(colored_boxes, { x_fill: false,
|
||||
x_align: St.Align.MIDDLE });
|
||||
|
||||
let b2 = new St.BoxLayout({ style: 'border: 2px solid #666666' });
|
||||
colored_boxes.add(b2, { expand: true });
|
||||
let b2 = new St.BoxLayout({ style: 'border: 2px solid #666666' });
|
||||
colored_boxes.add(b2, { expand: true });
|
||||
|
||||
b2.add(new St.Label({ text: "Expand",
|
||||
style: 'border: 1px solid #aaaaaa; '
|
||||
+ 'background: #ffeecc' }),
|
||||
{ expand: true });
|
||||
b2.add(new St.Label({ text: "Expand\nNo Fill",
|
||||
style: 'border: 1px solid #aaaaaa; '
|
||||
+ 'background: #ccffaa' }),
|
||||
{ expand: true,
|
||||
x_fill: false,
|
||||
x_align: St.Align.MIDDLE,
|
||||
y_fill: false,
|
||||
y_align: St.Align.MIDDLE });
|
||||
b2.add(new St.Label({ text: "Expand",
|
||||
style: 'border: 1px solid #aaaaaa; '
|
||||
+ 'background: #ffeecc' }),
|
||||
{ expand: true });
|
||||
b2.add(new St.Label({ text: "Expand\nNo Fill",
|
||||
style: 'border: 1px solid #aaaaaa; '
|
||||
+ 'background: #ccffaa' }),
|
||||
{ expand: true,
|
||||
x_fill: false,
|
||||
x_align: St.Align.MIDDLE,
|
||||
y_fill: false,
|
||||
y_align: St.Align.MIDDLE });
|
||||
|
||||
colored_boxes.add(new St.Label({ text: "Default",
|
||||
style: 'border: 1px solid #aaaaaa; '
|
||||
+ 'background: #cceeff' }));
|
||||
colored_boxes.add(new St.Label({ text: "Default",
|
||||
style: 'border: 1px solid #aaaaaa; '
|
||||
+ 'background: #cceeff' }));
|
||||
|
||||
b2.add(new St.Label({ x: 50,
|
||||
y: 50,
|
||||
text: "Fixed",
|
||||
style: 'border: 1px solid #aaaaaa;'
|
||||
+ 'background: #ffffcc' }));
|
||||
b2.add(new St.Label({ x: 50,
|
||||
y: 50,
|
||||
text: "Fixed",
|
||||
style: 'border: 1px solid #aaaaaa;'
|
||||
+ 'background: #ffffcc' }));
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
function createCollapsableBox(width) {
|
||||
let b = new St.BoxLayout({ width: width,
|
||||
style: 'border: 1px solid black;'
|
||||
+ 'font: 13px Sans;' });
|
||||
b.add(new St.Label({ text: "Very Very Very Long",
|
||||
style: 'background: #ffaacc;'
|
||||
+ 'padding: 5px; '
|
||||
+ 'border: 1px solid #666666;' }),
|
||||
{ expand: true });
|
||||
b.add(new St.Label({ text: "Very Very Long",
|
||||
style: 'background: #ffeecc; '
|
||||
+ 'padding: 5px; '
|
||||
+ 'border: 1px solid #666666;' }),
|
||||
{ expand: true });
|
||||
b.add(new St.Label({ text: "Very Long",
|
||||
style: 'background: #ccffaa; '
|
||||
+ 'padding: 5px; '
|
||||
+ 'border: 1px solid #666666;' }),
|
||||
{ expand: true });
|
||||
b.add(new St.Label({ text: "Short",
|
||||
style: 'background: #cceeff; '
|
||||
+ 'padding: 5px; '
|
||||
+ 'border: 1px solid #666666;' }),
|
||||
{ expand: true });
|
||||
function createCollapsableBox(width) {
|
||||
let b = new St.BoxLayout({ width: width,
|
||||
style: 'border: 1px solid black;'
|
||||
+ 'font: 13px Sans;' });
|
||||
b.add(new St.Label({ text: "Very Very Very Long",
|
||||
style: 'background: #ffaacc;'
|
||||
+ 'padding: 5px; '
|
||||
+ 'border: 1px solid #666666;' }),
|
||||
{ expand: true });
|
||||
b.add(new St.Label({ text: "Very Very Long",
|
||||
style: 'background: #ffeecc; '
|
||||
+ 'padding: 5px; '
|
||||
+ 'border: 1px solid #666666;' }),
|
||||
{ expand: true });
|
||||
b.add(new St.Label({ text: "Very Long",
|
||||
style: 'background: #ccffaa; '
|
||||
+ 'padding: 5px; '
|
||||
+ 'border: 1px solid #666666;' }),
|
||||
{ expand: true });
|
||||
b.add(new St.Label({ text: "Short",
|
||||
style: 'background: #cceeff; '
|
||||
+ 'padding: 5px; '
|
||||
+ 'border: 1px solid #666666;' }),
|
||||
{ expand: true });
|
||||
|
||||
return b;
|
||||
return b;
|
||||
}
|
||||
|
||||
for (let width = 200; width <= 500; width += 60 ) {
|
||||
vbox.add(createCollapsableBox (width),
|
||||
{ x_fill: false,
|
||||
x_align: St.Align.MIDDLE });
|
||||
}
|
||||
|
||||
UI.main(stage);
|
||||
}
|
||||
|
||||
for (let width = 200; width <= 500; width += 60 ) {
|
||||
vbox.add(createCollapsableBox (width),
|
||||
{ x_fill: false,
|
||||
x_align: St.Align.MIDDLE });
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
stage.show();
|
||||
Clutter.main();
|
||||
|
||||
@ -5,52 +5,53 @@ const St = imports.gi.St;
|
||||
|
||||
const UI = imports.testcommon.ui;
|
||||
|
||||
let stage = new Clutter.Stage({ width: 640, height: 480 });
|
||||
UI.init(stage);
|
||||
function test() {
|
||||
let stage = new Clutter.Stage({ width: 640, height: 480 });
|
||||
UI.init(stage);
|
||||
|
||||
let vbox = new St.BoxLayout({ width: stage.width,
|
||||
height: stage.height,
|
||||
style: 'background: #ffee88;' });
|
||||
stage.add_actor(vbox);
|
||||
let vbox = new St.BoxLayout({ width: stage.width,
|
||||
height: stage.height,
|
||||
style: 'background: #ffee88;' });
|
||||
stage.add_actor(vbox);
|
||||
|
||||
let scroll = new St.ScrollView();
|
||||
vbox.add(scroll, { expand: true });
|
||||
let scroll = new St.ScrollView();
|
||||
vbox.add(scroll, { expand: true });
|
||||
|
||||
let box = new St.BoxLayout({ vertical: true,
|
||||
style: 'padding: 10px;'
|
||||
+ 'spacing: 20px;' });
|
||||
scroll.add_actor(box);
|
||||
let box = new St.BoxLayout({ vertical: true,
|
||||
style: 'padding: 10px;'
|
||||
+ 'spacing: 20px;' });
|
||||
scroll.add_actor(box);
|
||||
|
||||
|
||||
function addTestCase(inset, offsetX, offsetY, blur, spread) {
|
||||
let shadowStyle = 'box-shadow: ' + (inset ? 'inset ' : '') +
|
||||
offsetX + 'px ' + offsetY + 'px ' + blur + 'px ' +
|
||||
(spread > 0 ? (' ' + spread + 'px ') : '') +
|
||||
'rgba(0,0,0,0.5);';
|
||||
let label = new St.Label({ style: 'border: 4px solid black;' +
|
||||
'border-radius: 5px;' +
|
||||
'background-color: white; ' +
|
||||
'padding: 5px;' +
|
||||
shadowStyle,
|
||||
text: shadowStyle });
|
||||
box.add(label, { x_fill: false, y_fill: false } );
|
||||
function addTestCase(inset, offsetX, offsetY, blur, spread) {
|
||||
let shadowStyle = 'box-shadow: ' + (inset ? 'inset ' : '') +
|
||||
offsetX + 'px ' + offsetY + 'px ' + blur + 'px ' +
|
||||
(spread > 0 ? (' ' + spread + 'px ') : '') +
|
||||
'rgba(0,0,0,0.5);';
|
||||
let label = new St.Label({ style: 'border: 4px solid black;' +
|
||||
'border-radius: 5px;' +
|
||||
'background-color: white; ' +
|
||||
'padding: 5px;' +
|
||||
shadowStyle,
|
||||
text: shadowStyle });
|
||||
box.add(label, { x_fill: false, y_fill: false } );
|
||||
}
|
||||
|
||||
addTestCase (false, 3, 4, 0, 0);
|
||||
addTestCase (false, 3, 4, 0, 4);
|
||||
addTestCase (false, 3, 4, 4, 0);
|
||||
addTestCase (false, 3, 4, 4, 4);
|
||||
addTestCase (false, -3, -4, 4, 0);
|
||||
addTestCase (false, 0, 0, 0, 4);
|
||||
addTestCase (false, 0, 0, 4, 0);
|
||||
addTestCase (true, 3, 4, 0, 0);
|
||||
addTestCase (true, 3, 4, 0, 4);
|
||||
addTestCase (true, 3, 4, 4, 0);
|
||||
addTestCase (true, 3, 4, 4, 4);
|
||||
addTestCase (true, -3, -4, 4, 0);
|
||||
addTestCase (true, 0, 0, 0, 4);
|
||||
addTestCase (true, 0, 0, 4, 0);
|
||||
|
||||
UI.main(stage);
|
||||
}
|
||||
|
||||
addTestCase (false, 3, 4, 0, 0);
|
||||
addTestCase (false, 3, 4, 0, 4);
|
||||
addTestCase (false, 3, 4, 4, 0);
|
||||
addTestCase (false, 3, 4, 4, 4);
|
||||
addTestCase (false, -3, -4, 4, 0);
|
||||
addTestCase (false, 0, 0, 0, 4);
|
||||
addTestCase (false, 0, 0, 4, 0);
|
||||
addTestCase (true, 3, 4, 0, 0);
|
||||
addTestCase (true, 3, 4, 0, 4);
|
||||
addTestCase (true, 3, 4, 4, 0);
|
||||
addTestCase (true, 3, 4, 4, 4);
|
||||
addTestCase (true, -3, -4, 4, 0);
|
||||
addTestCase (true, 0, 0, 0, 4);
|
||||
addTestCase (true, 0, 0, 4, 0);
|
||||
|
||||
stage.show();
|
||||
Clutter.main();
|
||||
stage.destroy();
|
||||
test();
|
||||
|
||||
@ -7,21 +7,22 @@ const St = imports.gi.St;
|
||||
const Calendar = imports.ui.calendar;
|
||||
const UI = imports.testcommon.ui;
|
||||
|
||||
let stage = new Clutter.Stage({ width: 400, height: 400 });
|
||||
UI.init(stage);
|
||||
function test() {
|
||||
let stage = new Clutter.Stage({ width: 400, height: 400 });
|
||||
UI.init(stage);
|
||||
|
||||
let vbox = new St.BoxLayout({ vertical: true,
|
||||
width: stage.width,
|
||||
height: stage.height,
|
||||
style: 'padding: 10px; spacing: 10px; font: 15px sans-serif;' });
|
||||
stage.add_actor(vbox);
|
||||
let vbox = new St.BoxLayout({ vertical: true,
|
||||
width: stage.width,
|
||||
height: stage.height,
|
||||
style: 'padding: 10px; spacing: 10px; font: 15px sans-serif;' });
|
||||
stage.add_actor(vbox);
|
||||
|
||||
let calendar = new Calendar.Calendar();
|
||||
vbox.add(calendar.actor,
|
||||
{ expand: true,
|
||||
x_fill: false, x_align: St.Align.MIDDLE,
|
||||
y_fill: false, y_align: St.Align.START });
|
||||
let calendar = new Calendar.Calendar();
|
||||
vbox.add(calendar.actor,
|
||||
{ expand: true,
|
||||
x_fill: false, x_align: St.Align.MIDDLE,
|
||||
y_fill: false, y_align: St.Align.START });
|
||||
|
||||
stage.show();
|
||||
Clutter.main();
|
||||
stage.destroy();
|
||||
UI.main(stage);
|
||||
}
|
||||
test();
|
||||
|
||||
@ -5,35 +5,37 @@ const St = imports.gi.St;
|
||||
|
||||
const UI = imports.testcommon.ui;
|
||||
|
||||
let stage = new Clutter.Stage();
|
||||
UI.init(stage);
|
||||
function test() {
|
||||
let stage = new Clutter.Stage();
|
||||
UI.init(stage);
|
||||
|
||||
let b = new St.BoxLayout({ vertical: true,
|
||||
width: stage.width,
|
||||
height: stage.height });
|
||||
stage.add_actor(b);
|
||||
let b = new St.BoxLayout({ vertical: true,
|
||||
width: stage.width,
|
||||
height: stage.height });
|
||||
stage.add_actor(b);
|
||||
|
||||
let t;
|
||||
let t;
|
||||
|
||||
t = new St.Label({ "text": "Bold", style_class: "bold" });
|
||||
b.add(t);
|
||||
t = new St.Label({ "text": "Monospace", style_class: "monospace" });
|
||||
b.add(t);
|
||||
t = new St.Label({ "text": "Italic", style_class: "italic" });
|
||||
b.add(t);
|
||||
t = new St.Label({ "text": "Bold Italic", style_class: "bold italic" });
|
||||
b.add(t);
|
||||
t = new St.Label({ "text": "Big Italic", style_class: "big italic" });
|
||||
b.add(t);
|
||||
t = new St.Label({ "text": "Big Bold", style_class: "big bold" });
|
||||
b.add(t);
|
||||
t = new St.Label({ "text": "Bold", style_class: "bold" });
|
||||
b.add(t);
|
||||
t = new St.Label({ "text": "Monospace", style_class: "monospace" });
|
||||
b.add(t);
|
||||
t = new St.Label({ "text": "Italic", style_class: "italic" });
|
||||
b.add(t);
|
||||
t = new St.Label({ "text": "Bold Italic", style_class: "bold italic" });
|
||||
b.add(t);
|
||||
t = new St.Label({ "text": "Big Italic", style_class: "big italic" });
|
||||
b.add(t);
|
||||
t = new St.Label({ "text": "Big Bold", style_class: "big bold" });
|
||||
b.add(t);
|
||||
|
||||
let b2 = new St.BoxLayout({ vertical: true, style_class: "monospace" });
|
||||
b.add(b2);
|
||||
t = new St.Label({ "text": "Big Monospace", style_class: "big" });
|
||||
b2.add(t);
|
||||
t = new St.Label({ "text": "Italic Monospace", style_class: "italic" });
|
||||
b2.add(t);
|
||||
let b2 = new St.BoxLayout({ vertical: true, style_class: "monospace" });
|
||||
b.add(b2);
|
||||
t = new St.Label({ "text": "Big Monospace", style_class: "big" });
|
||||
b2.add(t);
|
||||
t = new St.Label({ "text": "Italic Monospace", style_class: "italic" });
|
||||
b2.add(t);
|
||||
|
||||
stage.show();
|
||||
Clutter.main();
|
||||
UI.main(stage);
|
||||
}
|
||||
test();
|
||||
|
||||
@ -7,21 +7,22 @@ const St = imports.gi.St;
|
||||
const Calendar = imports.ui.calendar;
|
||||
const UI = imports.testcommon.ui;
|
||||
|
||||
let stage = new Clutter.Stage({ width: 400, height: 400 });
|
||||
UI.init(stage);
|
||||
function test() {
|
||||
let stage = new Clutter.Stage({ width: 400, height: 400 });
|
||||
UI.init(stage);
|
||||
|
||||
let vbox = new St.BoxLayout({ vertical: true,
|
||||
width: stage.width,
|
||||
height: stage.height,
|
||||
style: 'padding: 10px; spacing: 10px; font: 15px sans-serif;' });
|
||||
stage.add_actor(vbox);
|
||||
let vbox = new St.BoxLayout({ vertical: true,
|
||||
width: stage.width,
|
||||
height: stage.height,
|
||||
style: 'padding: 10px; spacing: 10px; font: 15px sans-serif;' });
|
||||
stage.add_actor(vbox);
|
||||
|
||||
let entry = new St.Entry({ style: 'border: 1px solid black;' });
|
||||
vbox.add(entry,
|
||||
{ expand: true,
|
||||
y_fill: false, y_align: St.Align.MIDDLE });
|
||||
entry.grab_key_focus();
|
||||
let entry = new St.Entry({ style: 'border: 1px solid black;' });
|
||||
vbox.add(entry,
|
||||
{ expand: true,
|
||||
y_fill: false, y_align: St.Align.MIDDLE });
|
||||
entry.grab_key_focus();
|
||||
|
||||
stage.show();
|
||||
Clutter.main();
|
||||
stage.destroy();
|
||||
UI.main(stage);
|
||||
}
|
||||
test();
|
||||
|
||||
@ -5,81 +5,83 @@ const St = imports.gi.St;
|
||||
|
||||
const UI = imports.testcommon.ui;
|
||||
|
||||
let stage = new Clutter.Stage();
|
||||
UI.init(stage);
|
||||
function test() {
|
||||
let stage = new Clutter.Stage();
|
||||
UI.init(stage);
|
||||
|
||||
let b = new St.BoxLayout({ vertical: true,
|
||||
width: stage.width,
|
||||
height: stage.height });
|
||||
stage.add_actor(b);
|
||||
let b = new St.BoxLayout({ vertical: true,
|
||||
width: stage.width,
|
||||
height: stage.height });
|
||||
stage.add_actor(b);
|
||||
|
||||
function addTest(label, icon_props) {
|
||||
if (b.get_children().length > 0)
|
||||
b.add (new St.BoxLayout({ style: 'background: #cccccc; border: 10px transparent white; height: 1px; ' }));
|
||||
function addTest(label, icon_props) {
|
||||
if (b.get_children().length > 0)
|
||||
b.add (new St.BoxLayout({ style: 'background: #cccccc; border: 10px transparent white; height: 1px; ' }));
|
||||
|
||||
let hb = new St.BoxLayout({ vertical: false,
|
||||
style: 'spacing: 10px;' });
|
||||
let hb = new St.BoxLayout({ vertical: false,
|
||||
style: 'spacing: 10px;' });
|
||||
|
||||
hb.add(new St.Label({ text: label }), { y_fill: false });
|
||||
hb.add(new St.Icon(icon_props));
|
||||
hb.add(new St.Label({ text: label }), { y_fill: false });
|
||||
hb.add(new St.Icon(icon_props));
|
||||
|
||||
b.add(hb);
|
||||
}
|
||||
|
||||
addTest("Symbolic",
|
||||
{ icon_name: 'battery-full',
|
||||
icon_type: St.IconType.SYMBOLIC,
|
||||
icon_size: 48 });
|
||||
addTest("Full color",
|
||||
{ icon_name: 'battery-full',
|
||||
icon_type: St.IconType.FULLCOLOR,
|
||||
icon_size: 48 });
|
||||
addTest("Default size",
|
||||
{ icon_name: 'battery-full',
|
||||
icon_type: St.IconType.SYMBOLIC });
|
||||
addTest("Size set by property",
|
||||
{ icon_name: 'battery-full',
|
||||
icon_type: St.IconType.SYMBOLIC,
|
||||
icon_size: 32 });
|
||||
addTest("Size set by style",
|
||||
{ icon_name: 'battery-full',
|
||||
icon_type: St.IconType.SYMBOLIC,
|
||||
style: 'icon-size: 1em;' });
|
||||
addTest("16px icon in 48px icon widget",
|
||||
{ icon_name: 'battery-full',
|
||||
icon_type: St.IconType.SYMBOLIC,
|
||||
style: 'icon-size: 16px; width: 48px; height: 48px; border: 1px solid black;' });
|
||||
|
||||
function iconRow(icons, box_style) {
|
||||
let hb = new St.BoxLayout({ vertical: false, style: box_style });
|
||||
|
||||
for each (let iconName in icons) {
|
||||
hb.add(new St.Icon({ icon_name: iconName,
|
||||
icon_type: St.IconType.SYMBOLIC,
|
||||
icon_size: 48 }));
|
||||
b.add(hb);
|
||||
}
|
||||
|
||||
b.add(hb);
|
||||
addTest("Symbolic",
|
||||
{ icon_name: 'battery-full',
|
||||
icon_type: St.IconType.SYMBOLIC,
|
||||
icon_size: 48 });
|
||||
addTest("Full color",
|
||||
{ icon_name: 'battery-full',
|
||||
icon_type: St.IconType.FULLCOLOR,
|
||||
icon_size: 48 });
|
||||
addTest("Default size",
|
||||
{ icon_name: 'battery-full',
|
||||
icon_type: St.IconType.SYMBOLIC });
|
||||
addTest("Size set by property",
|
||||
{ icon_name: 'battery-full',
|
||||
icon_type: St.IconType.SYMBOLIC,
|
||||
icon_size: 32 });
|
||||
addTest("Size set by style",
|
||||
{ icon_name: 'battery-full',
|
||||
icon_type: St.IconType.SYMBOLIC,
|
||||
style: 'icon-size: 1em;' });
|
||||
addTest("16px icon in 48px icon widget",
|
||||
{ icon_name: 'battery-full',
|
||||
icon_type: St.IconType.SYMBOLIC,
|
||||
style: 'icon-size: 16px; width: 48px; height: 48px; border: 1px solid black;' });
|
||||
|
||||
function iconRow(icons, box_style) {
|
||||
let hb = new St.BoxLayout({ vertical: false, style: box_style });
|
||||
|
||||
for each (let iconName in icons) {
|
||||
hb.add(new St.Icon({ icon_name: iconName,
|
||||
icon_type: St.IconType.SYMBOLIC,
|
||||
icon_size: 48 }));
|
||||
}
|
||||
|
||||
b.add(hb);
|
||||
}
|
||||
|
||||
let normalCss = 'background: white; color: black; padding: 10px 10px;';
|
||||
let reversedCss = 'background: black; color: white; warning-color: #ffcc00; error-color: #ff0000; padding: 10px 10px;';
|
||||
|
||||
let batteryIcons = ['battery-full-charging',
|
||||
'battery-full',
|
||||
'battery-good',
|
||||
'battery-low',
|
||||
'battery-caution' ];
|
||||
|
||||
let volumeIcons = ['audio-volume-high',
|
||||
'audio-volume-medium',
|
||||
'audio-volume-low',
|
||||
'audio-volume-muted' ];
|
||||
|
||||
iconRow(batteryIcons, normalCss);
|
||||
iconRow(batteryIcons, reversedCss);
|
||||
iconRow(volumeIcons, normalCss);
|
||||
iconRow(volumeIcons, reversedCss);
|
||||
|
||||
UI.main(stage);
|
||||
}
|
||||
|
||||
let normalCss = 'background: white; color: black; padding: 10px 10px;';
|
||||
let reversedCss = 'background: black; color: white; warning-color: #ffcc00; error-color: #ff0000; padding: 10px 10px;';
|
||||
|
||||
let batteryIcons = ['battery-full-charging',
|
||||
'battery-full',
|
||||
'battery-good',
|
||||
'battery-low',
|
||||
'battery-caution' ];
|
||||
|
||||
let volumeIcons = ['audio-volume-high',
|
||||
'audio-volume-medium',
|
||||
'audio-volume-low',
|
||||
'audio-volume-muted' ];
|
||||
|
||||
iconRow(batteryIcons, normalCss);
|
||||
iconRow(batteryIcons, reversedCss);
|
||||
iconRow(volumeIcons, normalCss);
|
||||
iconRow(volumeIcons, reversedCss);
|
||||
|
||||
stage.show();
|
||||
Clutter.main();
|
||||
test();
|
||||
|
||||
@ -5,43 +5,43 @@ const St = imports.gi.St;
|
||||
|
||||
const UI = imports.testcommon.ui;
|
||||
|
||||
let stage = new Clutter.Stage();
|
||||
UI.init(stage);
|
||||
function test() {
|
||||
let stage = new Clutter.Stage();
|
||||
UI.init(stage);
|
||||
|
||||
let vbox = new St.BoxLayout({ vertical: true,
|
||||
width: stage.width,
|
||||
height: stage.height });
|
||||
stage.add_actor(vbox);
|
||||
let vbox = new St.BoxLayout({ vertical: true,
|
||||
width: stage.width,
|
||||
height: stage.height });
|
||||
stage.add_actor(vbox);
|
||||
|
||||
let hbox = new St.BoxLayout({ style: 'spacing: 12px;' });
|
||||
vbox.add(hbox);
|
||||
let hbox = new St.BoxLayout({ style: 'spacing: 12px;' });
|
||||
vbox.add(hbox);
|
||||
|
||||
let text = new St.Label({ text: "Styled Text" });
|
||||
vbox.add (text);
|
||||
let text = new St.Label({ text: "Styled Text" });
|
||||
vbox.add (text);
|
||||
|
||||
let size = 24;
|
||||
function update_size() {
|
||||
text.style = 'font-size: ' + size + 'pt';
|
||||
let size = 24;
|
||||
function update_size() {
|
||||
text.style = 'font-size: ' + size + 'pt';
|
||||
}
|
||||
update_size();
|
||||
|
||||
let button;
|
||||
|
||||
button = new St.Button ({ label: 'Smaller', style_class: 'push-button' });
|
||||
hbox.add (button);
|
||||
button.connect('clicked', function() {
|
||||
size /= 1.2;
|
||||
update_size ();
|
||||
});
|
||||
|
||||
button = new St.Button ({ label: 'Bigger', style_class: 'push-button' });
|
||||
hbox.add (button);
|
||||
button.connect('clicked', function() {
|
||||
size *= 1.2;
|
||||
update_size ();
|
||||
});
|
||||
|
||||
UI.main(stage);
|
||||
}
|
||||
update_size();
|
||||
|
||||
let button;
|
||||
|
||||
button = new St.Button ({ label: 'Smaller', style_class: 'push-button' });
|
||||
hbox.add (button);
|
||||
button.connect('clicked', function() {
|
||||
size /= 1.2;
|
||||
update_size ();
|
||||
});
|
||||
|
||||
button = new St.Button ({ label: 'Bigger', style_class: 'push-button' });
|
||||
hbox.add (button);
|
||||
button.connect('clicked', function() {
|
||||
size *= 1.2;
|
||||
update_size ();
|
||||
});
|
||||
|
||||
stage.show();
|
||||
Clutter.main();
|
||||
stage.destroy();
|
||||
|
||||
test();
|
||||
|
||||
@ -251,138 +251,139 @@ SizingIllustrator.prototype = {
|
||||
|
||||
/****************************************************************************/
|
||||
|
||||
let stage = new Clutter.Stage({ width: 600, height: 600 });
|
||||
UI.init(stage);
|
||||
function test() {
|
||||
let stage = new Clutter.Stage({ width: 600, height: 600 });
|
||||
UI.init(stage);
|
||||
|
||||
let mainBox = new St.BoxLayout({ width: stage.width,
|
||||
height: stage.height,
|
||||
vertical: true,
|
||||
style: 'padding: 10px;'
|
||||
+ 'spacing: 5px;'
|
||||
+ 'font: 16px sans-serif;'
|
||||
+ 'background: black;'
|
||||
+ 'color: white;' });
|
||||
stage.add_actor(mainBox);
|
||||
let mainBox = new St.BoxLayout({ width: stage.width,
|
||||
height: stage.height,
|
||||
vertical: true,
|
||||
style: 'padding: 10px;'
|
||||
+ 'spacing: 5px;'
|
||||
+ 'font: 16px sans-serif;'
|
||||
+ 'background: black;'
|
||||
+ 'color: white;' });
|
||||
stage.add_actor(mainBox);
|
||||
|
||||
const DOCS = 'Red lines represent minimum size, blue lines natural size. Drag yellow handle to resize ScrollView. Click on options to change.';
|
||||
const DOCS = 'Red lines represent minimum size, blue lines natural size. Drag yellow handle to resize ScrollView. Click on options to change.';
|
||||
|
||||
let docsLabel = new St.Label({ text: DOCS });
|
||||
docsLabel.clutter_text.line_wrap = true;
|
||||
mainBox.add(docsLabel);
|
||||
let docsLabel = new St.Label({ text: DOCS });
|
||||
docsLabel.clutter_text.line_wrap = true;
|
||||
mainBox.add(docsLabel);
|
||||
|
||||
let bin = new St.Bin({ x_fill: true, y_fill: true, style: 'border: 2px solid #666666;' });
|
||||
mainBox.add(bin, { x_fill: true, y_fill: true, expand: true });
|
||||
let bin = new St.Bin({ x_fill: true, y_fill: true, style: 'border: 2px solid #666666;' });
|
||||
mainBox.add(bin, { x_fill: true, y_fill: true, expand: true });
|
||||
|
||||
let illustrator = new SizingIllustrator();
|
||||
bin.add_actor(illustrator.actor);
|
||||
let illustrator = new SizingIllustrator();
|
||||
bin.add_actor(illustrator.actor);
|
||||
|
||||
let scrollView = new St.ScrollView();
|
||||
illustrator.add(scrollView);
|
||||
let scrollView = new St.ScrollView();
|
||||
illustrator.add(scrollView);
|
||||
|
||||
let box = new St.BoxLayout({ vertical: true });
|
||||
scrollView.add_actor(box);
|
||||
let box = new St.BoxLayout({ vertical: true });
|
||||
scrollView.add_actor(box);
|
||||
|
||||
let flowedBoxes = new FlowedBoxes();
|
||||
box.add(flowedBoxes.actor, { expand: false, x_fill: true, y_fill: true });
|
||||
let flowedBoxes = new FlowedBoxes();
|
||||
box.add(flowedBoxes.actor, { expand: false, x_fill: true, y_fill: true });
|
||||
|
||||
let policyBox = new St.BoxLayout({ vertical: false });
|
||||
mainBox.add(policyBox);
|
||||
let policyBox = new St.BoxLayout({ vertical: false });
|
||||
mainBox.add(policyBox);
|
||||
|
||||
policyBox.add(new St.Label({ text: 'Horizontal Policy: ' }));
|
||||
let hpolicy = new St.Button({ label: 'AUTOMATIC', style: 'text-decoration: underline; color: #4444ff;' });
|
||||
policyBox.add(hpolicy);
|
||||
policyBox.add(new St.Label({ text: 'Horizontal Policy: ' }));
|
||||
let hpolicy = new St.Button({ label: 'AUTOMATIC', style: 'text-decoration: underline; color: #4444ff;' });
|
||||
policyBox.add(hpolicy);
|
||||
|
||||
let spacer = new St.Bin();
|
||||
policyBox.add(spacer, { expand: true });
|
||||
let spacer = new St.Bin();
|
||||
policyBox.add(spacer, { expand: true });
|
||||
|
||||
policyBox.add(new St.Label({ text: 'Vertical Policy: '}));
|
||||
let vpolicy = new St.Button({ label: 'AUTOMATIC', style: 'text-decoration: underline; color: #4444ff;' });
|
||||
policyBox.add(vpolicy);
|
||||
policyBox.add(new St.Label({ text: 'Vertical Policy: '}));
|
||||
let vpolicy = new St.Button({ label: 'AUTOMATIC', style: 'text-decoration: underline; color: #4444ff;' });
|
||||
policyBox.add(vpolicy);
|
||||
|
||||
function togglePolicy(button) {
|
||||
switch(button.label) {
|
||||
case 'AUTOMATIC':
|
||||
button.label = 'ALWAYS';
|
||||
break;
|
||||
case 'ALWAYS':
|
||||
button.label = 'NEVER';
|
||||
break;
|
||||
case 'NEVER':
|
||||
button.label = 'AUTOMATIC';
|
||||
break;
|
||||
function togglePolicy(button) {
|
||||
switch(button.label) {
|
||||
case 'AUTOMATIC':
|
||||
button.label = 'ALWAYS';
|
||||
break;
|
||||
case 'ALWAYS':
|
||||
button.label = 'NEVER';
|
||||
break;
|
||||
case 'NEVER':
|
||||
button.label = 'AUTOMATIC';
|
||||
break;
|
||||
}
|
||||
scrollView.set_policy(Gtk.PolicyType[hpolicy.label], Gtk.PolicyType[vpolicy.label]);
|
||||
}
|
||||
scrollView.set_policy(Gtk.PolicyType[hpolicy.label], Gtk.PolicyType[vpolicy.label]);
|
||||
}
|
||||
|
||||
hpolicy.connect('clicked', function() { togglePolicy(hpolicy); });
|
||||
vpolicy.connect('clicked', function() { togglePolicy(vpolicy); });
|
||||
hpolicy.connect('clicked', function() { togglePolicy(hpolicy); });
|
||||
vpolicy.connect('clicked', function() { togglePolicy(vpolicy); });
|
||||
|
||||
let fadeBox = new St.BoxLayout({ vertical: false });
|
||||
mainBox.add(fadeBox);
|
||||
let fadeBox = new St.BoxLayout({ vertical: false });
|
||||
mainBox.add(fadeBox);
|
||||
|
||||
spacer = new St.Bin();
|
||||
fadeBox.add(spacer, { expand: true });
|
||||
spacer = new St.Bin();
|
||||
fadeBox.add(spacer, { expand: true });
|
||||
|
||||
fadeBox.add(new St.Label({ text: 'Padding: '}));
|
||||
let paddingButton = new St.Button({ label: 'No', style: 'text-decoration: underline; color: #4444ff;padding-right:3px;' });
|
||||
fadeBox.add(paddingButton);
|
||||
fadeBox.add(new St.Label({ text: 'Padding: '}));
|
||||
let paddingButton = new St.Button({ label: 'No', style: 'text-decoration: underline; color: #4444ff;padding-right:3px;' });
|
||||
fadeBox.add(paddingButton);
|
||||
|
||||
fadeBox.add(new St.Label({ text: 'Borders: '}));
|
||||
let borderButton = new St.Button({ label: 'No', style: 'text-decoration: underline; color: #4444ff;padding-right:3px;' });
|
||||
fadeBox.add(borderButton);
|
||||
fadeBox.add(new St.Label({ text: 'Borders: '}));
|
||||
let borderButton = new St.Button({ label: 'No', style: 'text-decoration: underline; color: #4444ff;padding-right:3px;' });
|
||||
fadeBox.add(borderButton);
|
||||
|
||||
fadeBox.add(new St.Label({ text: 'Vertical Fade: '}));
|
||||
let vfade = new St.Button({ label: 'No', style: 'text-decoration: underline; color: #4444ff;' });
|
||||
fadeBox.add(vfade);
|
||||
fadeBox.add(new St.Label({ text: 'Vertical Fade: '}));
|
||||
let vfade = new St.Button({ label: 'No', style: 'text-decoration: underline; color: #4444ff;' });
|
||||
fadeBox.add(vfade);
|
||||
|
||||
function togglePadding(button) {
|
||||
switch(button.label) {
|
||||
case 'No':
|
||||
button.label = 'Yes';
|
||||
break;
|
||||
case 'Yes':
|
||||
button.label = 'No';
|
||||
break;
|
||||
function togglePadding(button) {
|
||||
switch(button.label) {
|
||||
case 'No':
|
||||
button.label = 'Yes';
|
||||
break;
|
||||
case 'Yes':
|
||||
button.label = 'No';
|
||||
break;
|
||||
}
|
||||
if (scrollView.style == null)
|
||||
scrollView.style = (button.label == 'Yes' ? 'padding: 10px;' : 'padding: 0;');
|
||||
else
|
||||
scrollView.style += (button.label == 'Yes' ? 'padding: 10px;' : 'padding: 0;');
|
||||
}
|
||||
if (scrollView.style == null)
|
||||
scrollView.style = (button.label == 'Yes' ? 'padding: 10px;' : 'padding: 0;');
|
||||
else
|
||||
scrollView.style += (button.label == 'Yes' ? 'padding: 10px;' : 'padding: 0;');
|
||||
}
|
||||
|
||||
paddingButton.connect('clicked', function() { togglePadding(paddingButton); });
|
||||
paddingButton.connect('clicked', function() { togglePadding(paddingButton); });
|
||||
|
||||
function toggleBorders(button) {
|
||||
switch(button.label) {
|
||||
case 'No':
|
||||
button.label = 'Yes';
|
||||
break;
|
||||
case 'Yes':
|
||||
button.label = 'No';
|
||||
break;
|
||||
function toggleBorders(button) {
|
||||
switch(button.label) {
|
||||
case 'No':
|
||||
button.label = 'Yes';
|
||||
break;
|
||||
case 'Yes':
|
||||
button.label = 'No';
|
||||
break;
|
||||
}
|
||||
if (scrollView.style == null)
|
||||
scrollView.style = (button.label == 'Yes' ? 'border: 2px solid red;' : 'border: 0;');
|
||||
else
|
||||
scrollView.style += (button.label == 'Yes' ? 'border: 2px solid red;' : 'border: 0;');
|
||||
}
|
||||
if (scrollView.style == null)
|
||||
scrollView.style = (button.label == 'Yes' ? 'border: 2px solid red;' : 'border: 0;');
|
||||
else
|
||||
scrollView.style += (button.label == 'Yes' ? 'border: 2px solid red;' : 'border: 0;');
|
||||
}
|
||||
|
||||
borderButton.connect('clicked', function() { toggleBorders(borderButton); });
|
||||
borderButton.connect('clicked', function() { toggleBorders(borderButton); });
|
||||
|
||||
function toggleFade(button) {
|
||||
switch(button.label) {
|
||||
case 'No':
|
||||
button.label = 'Yes';
|
||||
break;
|
||||
case 'Yes':
|
||||
button.label = 'No';
|
||||
break;
|
||||
function toggleFade(button) {
|
||||
switch(button.label) {
|
||||
case 'No':
|
||||
button.label = 'Yes';
|
||||
break;
|
||||
case 'Yes':
|
||||
button.label = 'No';
|
||||
break;
|
||||
}
|
||||
scrollView.set_style_class_name(button.label == 'Yes' ? 'vfade' : '');
|
||||
}
|
||||
scrollView.set_style_class_name(button.label == 'Yes' ? 'vfade' : '');
|
||||
|
||||
vfade.connect('clicked', function() { toggleFade(vfade); });
|
||||
|
||||
UI.main(stage);
|
||||
}
|
||||
|
||||
vfade.connect('clicked', function() { toggleFade(vfade); });
|
||||
|
||||
stage.show();
|
||||
Clutter.main();
|
||||
stage.destroy();
|
||||
test();
|
||||
|
||||
@ -6,47 +6,48 @@ const St = imports.gi.St;
|
||||
|
||||
const UI = imports.testcommon.ui;
|
||||
|
||||
let stage = new Clutter.Stage();
|
||||
UI.init(stage);
|
||||
function test() {
|
||||
let stage = new Clutter.Stage();
|
||||
UI.init(stage);
|
||||
|
||||
let vbox = new St.BoxLayout({ vertical: true,
|
||||
width: stage.width,
|
||||
height: stage.height,
|
||||
style: "padding: 10px;" });
|
||||
stage.add_actor(vbox);
|
||||
let vbox = new St.BoxLayout({ vertical: true,
|
||||
width: stage.width,
|
||||
height: stage.height,
|
||||
style: "padding: 10px;" });
|
||||
stage.add_actor(vbox);
|
||||
|
||||
let toggle = new St.Button({ label: 'Horizontal Scrolling',
|
||||
toggle_mode: true });
|
||||
vbox.add(toggle);
|
||||
let toggle = new St.Button({ label: 'Horizontal Scrolling',
|
||||
toggle_mode: true });
|
||||
vbox.add(toggle);
|
||||
|
||||
let v = new St.ScrollView();
|
||||
vbox.add(v, { expand: true });
|
||||
let v = new St.ScrollView();
|
||||
vbox.add(v, { expand: true });
|
||||
|
||||
toggle.connect('notify::checked', function () {
|
||||
v.set_policy(toggle.checked ? Gtk.PolicyType.AUTOMATIC
|
||||
: Gtk.PolicyType.NEVER,
|
||||
Gtk.PolicyType.AUTOMATIC);
|
||||
});
|
||||
toggle.connect('notify::checked', function () {
|
||||
v.set_policy(toggle.checked ? Gtk.PolicyType.AUTOMATIC
|
||||
: Gtk.PolicyType.NEVER,
|
||||
Gtk.PolicyType.AUTOMATIC);
|
||||
});
|
||||
|
||||
let b = new St.BoxLayout({ vertical: true,
|
||||
style: "border: 2px solid #880000; border-radius: 10px; padding: 0px 5px;" });
|
||||
v.add_actor(b);
|
||||
let b = new St.BoxLayout({ vertical: true,
|
||||
style: "border: 2px solid #880000; border-radius: 10px; padding: 0px 5px;" });
|
||||
v.add_actor(b);
|
||||
|
||||
let cc_a = "a".charCodeAt(0);
|
||||
let s = "";
|
||||
for (let i = 0; i < 26 * 3; i++) {
|
||||
s += String.fromCharCode(cc_a + i % 26);
|
||||
let cc_a = "a".charCodeAt(0);
|
||||
let s = "";
|
||||
for (let i = 0; i < 26 * 3; i++) {
|
||||
s += String.fromCharCode(cc_a + i % 26);
|
||||
|
||||
let t = new St.Label({ text: s,
|
||||
reactive: true });
|
||||
let line = i + 1;
|
||||
t.connect('button-press-event',
|
||||
function() {
|
||||
log("Click on line " + line);
|
||||
});
|
||||
b.add(t);
|
||||
let t = new St.Label({ text: s,
|
||||
reactive: true });
|
||||
let line = i + 1;
|
||||
t.connect('button-press-event',
|
||||
function() {
|
||||
log("Click on line " + line);
|
||||
});
|
||||
b.add(t);
|
||||
}
|
||||
|
||||
UI.main(stage);
|
||||
}
|
||||
|
||||
stage.show();
|
||||
Clutter.main();
|
||||
stage.destroy();
|
||||
test();
|
||||
|
||||
@ -5,51 +5,53 @@ const St = imports.gi.St;
|
||||
|
||||
const UI = imports.testcommon.ui;
|
||||
|
||||
let stage = new Clutter.Stage({ width: 600, height: 600 });
|
||||
UI.init(stage);
|
||||
function test() {
|
||||
let stage = new Clutter.Stage({ width: 600, height: 600 });
|
||||
UI.init(stage);
|
||||
|
||||
let vbox = new St.BoxLayout({ vertical: true,
|
||||
width: stage.width,
|
||||
height: stage.height,
|
||||
style: 'padding: 10px; '
|
||||
+ 'spacing: 10px;'
|
||||
+ 'font: 15px sans-serif;' });
|
||||
stage.add_actor(vbox);
|
||||
let vbox = new St.BoxLayout({ vertical: true,
|
||||
width: stage.width,
|
||||
height: stage.height,
|
||||
style: 'padding: 10px; '
|
||||
+ 'spacing: 10px;'
|
||||
+ 'font: 15px sans-serif;' });
|
||||
stage.add_actor(vbox);
|
||||
|
||||
function L(text, color) {
|
||||
return new St.Label({ text: text,
|
||||
style: "background: " + color + ";"
|
||||
+ "border: 1px solid rgba(0,0,0,0.5);"
|
||||
+ "padding: 1em;" });
|
||||
function L(text, color) {
|
||||
return new St.Label({ text: text,
|
||||
style: "background: " + color + ";"
|
||||
+ "border: 1px solid rgba(0,0,0,0.5);"
|
||||
+ "padding: 1em;" });
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
let table = new St.Table({ style: "border: 10px solid #888888;"
|
||||
+ "padding: 10px;"
|
||||
+ "spacing-rows: 5px;"
|
||||
+ "spacing-columns: 15px;" });
|
||||
vbox.add(table, { expand: true });
|
||||
|
||||
table.add(L("1", "#ff0000"),
|
||||
{ row: 0, col: 0, col_span: 3 });
|
||||
table.add(L("2", "#00ff00"),
|
||||
{ row: 1, col: 0, row_span: 2 });
|
||||
table.add(L("3", "#0000ff"),
|
||||
{ row: 1, col: 1,
|
||||
x_expand: 0 });
|
||||
table.add(L("4", "#ffff00"),
|
||||
{ row: 1, col: 2,
|
||||
y_expand: 0, y_fill: 0
|
||||
});
|
||||
table.add(L("5", "#ff00ff"),
|
||||
{ row: 2, col: 1, x_expand: 0 });
|
||||
table.add(L("6", "#00ffff"),
|
||||
{ row: 2, col: 2,
|
||||
x_expand: 0, x_fill: 0, x_align: St.Align.END,
|
||||
y_expand: 0, y_fill: 0, y_align: St.Align.END });
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
UI.main(stage);
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
let table = new St.Table({ style: "border: 10px solid #888888;"
|
||||
+ "padding: 10px;"
|
||||
+ "spacing-rows: 5px;"
|
||||
+ "spacing-columns: 15px;" });
|
||||
vbox.add(table, { expand: true });
|
||||
|
||||
table.add(L("1", "#ff0000"),
|
||||
{ row: 0, col: 0, col_span: 3 });
|
||||
table.add(L("2", "#00ff00"),
|
||||
{ row: 1, col: 0, row_span: 2 });
|
||||
table.add(L("3", "#0000ff"),
|
||||
{ row: 1, col: 1,
|
||||
x_expand: 0 });
|
||||
table.add(L("4", "#ffff00"),
|
||||
{ row: 1, col: 2,
|
||||
y_expand: 0, y_fill: 0
|
||||
});
|
||||
table.add(L("5", "#ff00ff"),
|
||||
{ row: 2, col: 1, x_expand: 0 });
|
||||
table.add(L("6", "#00ffff"),
|
||||
{ row: 2, col: 2,
|
||||
x_expand: 0, x_fill: 0, x_align: St.Align.END,
|
||||
y_expand: 0, y_fill: 0, y_align: St.Align.END });
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
stage.show();
|
||||
Clutter.main();
|
||||
test();
|
||||
|
||||
@ -5,30 +5,32 @@ const St = imports.gi.St;
|
||||
|
||||
const UI = imports.testcommon.ui;
|
||||
|
||||
let stage = new Clutter.Stage();
|
||||
UI.init(stage);
|
||||
function test() {
|
||||
let stage = new Clutter.Stage();
|
||||
UI.init(stage);
|
||||
|
||||
let hbox = new St.BoxLayout({ name: 'transition-container',
|
||||
reactive: true,
|
||||
track_hover: true,
|
||||
width: stage.width,
|
||||
height: stage.height,
|
||||
style: 'padding: 10px;'
|
||||
+ 'spacing: 10px;' });
|
||||
stage.add_actor(hbox);
|
||||
let hbox = new St.BoxLayout({ name: 'transition-container',
|
||||
reactive: true,
|
||||
track_hover: true,
|
||||
width: stage.width,
|
||||
height: stage.height,
|
||||
style: 'padding: 10px;'
|
||||
+ 'spacing: 10px;' });
|
||||
stage.add_actor(hbox);
|
||||
|
||||
for (let i = 0; i < 5; i ++) {
|
||||
let label = new St.Label({ text: (i+1).toString(),
|
||||
name: "label" + i,
|
||||
style_class: 'transition-label',
|
||||
reactive: true,
|
||||
track_hover: true });
|
||||
for (let i = 0; i < 5; i ++) {
|
||||
let label = new St.Label({ text: (i+1).toString(),
|
||||
name: "label" + i,
|
||||
style_class: 'transition-label',
|
||||
reactive: true,
|
||||
track_hover: true });
|
||||
|
||||
hbox.add(label, { x_fill: false,
|
||||
y_fill: false });
|
||||
hbox.add(label, { x_fill: false,
|
||||
y_fill: false });
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
UI.main(stage);
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
stage.show();
|
||||
Clutter.main();
|
||||
test();
|
||||
|
||||
@ -13,3 +13,11 @@ function init(stage) {
|
||||
let theme = new St.Theme({ application_stylesheet: stylesheetPath });
|
||||
context.set_theme(theme);
|
||||
}
|
||||
|
||||
function main(stage) {
|
||||
stage.show();
|
||||
stage.connect('destroy', function() {
|
||||
Clutter.main_quit();
|
||||
});
|
||||
Clutter.main();
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user