I have the following code, where a button has four resizers. When I use the top left resizer for example, it button shrinks from the bottom right, as opposed to shrinking and moving so that the top left corner follows the cursor. I've looked in Mozilla's docs and on Google, and tried adding custom on mousedown event handlers to move the thing around - but to no avail. How do I make this behave correctly?
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="main" title="My App" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/javascript" src="chrome://ades/content/main.js"/>
<hbox>
<stack style="padding: 0;">
<button id="b" label="Resizable" style="margin: 0;"/>
<resizer dir="topleft" style="background: red; -moz-appearance: none;"
element="b" left="0" top="0" width="5" height="5" />
<resizer dir="topright" style="background: black; -moz-appearance: none;"
element="b" right="0" top="0" width="5" height="5"/>
<resizer dir="bottomleft" style="background: black; -moz-appearance: none;"
element="b" left="0" bottom="0" width="5" height="5"/>
<resizer dir="bottomright" style="background: black; -moz-appearance: none;"
element="b" right="0" bottom="0" width="5" height="5"/>
</stack>
</hbox>
</window>
I'm not sure how to achieve what you want but if you're resizing your button it will always reposition itself in the stack (which is at the beginning of the hbox), so it will always be at the beginning of the hbox. You might try with absolute positioning but I'm not sure if that'll work either.
Related
I have this code
<template>
<Page>
<ActionBar title="Action Items">
<StackLayout orientation="horizontal">
<Image src="res://icon" width="40" height="40"
verticalAlignment="center" />
<Label text="NativeScript" fontSize="24"
verticalAlignment="center" />
</StackLayout>
<NavigationButton text="Go Back" android.systemIcon="ic_menu_back"
(tap)="onNavBtnTap()">
</NavigationButton>
<ActionItem (tap)="onShare()" ios.systemIcon="9"
ios.position="left" android.systemIcon="ic_menu_share"
android.position="actionBar">
</ActionItem>
<ActionItem (tap)="onDelete()" ios.systemIcon="16"
ios.position="right" text="delete" android.position="popup">
</ActionItem>
</ActionBar>
<ScrollView>
<StackLayout class="home-panel">
<!--Add your page content here-->
<Label textWrap="true" text="Play with NativeScript!"
class="h2 description-label">
{{first}}
</Label>
<Label textWrap="true"
text=" Write code in the editor or drag and drop components to build a NativeScript mobile application."
class="h2 description-label" />
<Label textWrap="true"
text="Scan the QR code with your mobile device and watch the changes sync live while you play with the code."
class="h2 description-label" />
</StackLayout>
</ScrollView>
</Page>
</template>
<script>
export default {
data() {
return {
first: "Once"
};
}
};
</script>
<style scoped>
.home-panel {
vertical-align: center;
font-size: 20;
margin: 15;
}
.description-label {
margin-bottom: 15;
}
</style>
which produces
My question is how come the back button aligned itself left and the others right without explicitly coding left or right?
<NavigationButton text="Go Back" android.systemIcon="ic_menu_back"
(tap)="onNavBtnTap()">
</NavigationButton>
and the other buttons are aligning to the right
<ActionItem (tap)="onShare()" ios.systemIcon="9"
ios.position="left" android.systemIcon="ic_menu_share"
android.position="actionBar">
</ActionItem>
<ActionItem (tap)="onDelete()" ios.systemIcon="16"
ios.position="right" text="delete" android.position="popup">
</ActionItem>
<NavigationButton/> is by default on the left, as it's just calls into the native setNavigationIcon api:
https://developer.android.com/reference/android/widget/Toolbar#setNavigationIcon(android.graphics.drawable.Drawable)
While the other <ActionItem> elements are added with the Menu api:
https://developer.android.com/reference/android/widget/Toolbar#getMenu()
For your other question, you can do the following:
<Label :text="`${first} Play with NativeScript!`" textWrap="true" class="h2 description-label" />
:text makes it a binding, the then you pass in a regular JavaScript string literal.
An alternative would be:
:text="first + ' Play with NativeScript!'"
Both ways should work fine.
I am developping an zotero plugin, and would like to draw a dialog. The width of dialog, groupbox, hbox, checkbox etc have been tried, minwidth, maxwidth have also been tried, but it doesn't work. I would like to get a line break at proper position of the labels.
Many thanks!
code:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/preferences.css"?>
<!DOCTYPE window SYSTEM "chrome://zoteroupdateifs/locale/options.dtd">
<!--给作者加粗加星-->
<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
id="updateifs-test"
title="&author-process-win;"
width="200"
height="300"
style="padding: 10px;"
buttons="accept,cancel"
ondialogaccept=" window.close();"
ondialogcancel="window.close();">
<stringbundleset id="stringbundleset">
<stringbundle id="updateifs-options" src="chrome://zotero-updateifs/locale/options.properties"/>
</stringbundleset>
<groupbox width="200">
<caption label="&update-abbr;"/>
<separator class='thin'/>
<description style="width: 220px">&update-journal-abbr;</description>
<separator class='thin'/>
<hbox style="margin: 0" width="200">
<checkbox id="id-updateifs-add-update" label="&add-update;" />
</hbox>
<separator class='thin'/>
<hbox style="margin: 0" maxwidth="200">
<checkbox id="id-updateifs-en-abbr" minwidth ='200' label="&en_abbr;"/>
</hbox>
<separator class='thin'/>
<hbox style="margin: 0" maxwidth="200">
<checkbox id="id-updateifs-ch-abbr" minwidth ='200' label="&ch_abbr;" />
</hbox>
</groupbox>
<script src="options.js"/>
<script
type="application/x-javascript"
src="chrome://zoteroupdateifs/content/scripts/options.js"/>
<script src="chrome://zotero/content/include.js"/>
</dialog>
it is weird, now it works, when I set the width of checkbox by using width ='250' .
I'm trying to create an SVG filter that will "cut" an image in half horizontally, and move the lower part a few pixels to the right. This filter is to be used in CSS.
For this, i am using feDisplacementMap on a rectangle that is generated with 2 feFlood merged together.
This is how i generate the rectangle to be used by the displacement map. I think it is properly generated:
.container {
outline: 1px solid green;
}
h1 {
filter: url(#displacementFilter);
}
<div class="container">
<h1>test</h1>
</div>
<svg width="0" height="0" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<filter id="displacementFilter" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox">
<!-- red channel for displacement, other channels neutral -->
<feFlood flood-color="rgb(255,128,128)" flood-opacity="0.5" result="rect-red" x="0%" y="50%" width="100%" height="50%"/>
<!-- all channels neutral for no displacement -->
<feFlood flood-color="rgb(128,128,128)" flood-opacity="0.5" result="rect-blue" x="0" y="0%" width="100%" height="50%"/>
<feMerge result="rect">
<feMergeNode in="rect-red"/>
<feMergeNode in="rect-blue"/>
</feMerge>
</filter>
</svg>
Now for the full example with the displacementMap, the filter does not seem to have any effect:
.container {
outline: 1px solid green;
}
h1 {
filter: url(#displacementFilter);
}
<div class="container">
<h1>test</h1>
</div>
<svg width="0" height="0" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<filter id="displacementFilter" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox">
<!-- building the in2 rectangle for the displacement map -->
<feFlood flood-color="rgb(255,128,128)" flood-opacity="0.5" result="rect-red" x="0%" y="50%" width="100%" height="50%"/>
<feFlood flood-color="rgb(128,128,128)" flood-opacity="0.5" result="rect-blue" x="0" y="0%" width="100%" height="50%"/>
<feMerge result="rect">
<feMergeNode in="rect-red"/>
<feMergeNode in="rect-blue"/>
</feMerge>
<!--
applying the displacement.
Depending on the scale, sometimes the source graphic
completely disappears
-->
<feDisplacementMap in2="rect" in="SourceGraphic" scale="10" xChannelSelector="R" yChannelSelector="G" result="displacement"/>
<!-- merging the rectangle and the displacement just to show the effect -->
<feMerge>
<feMergeNode in="rect"/>
<feMergeNode in="displacement"/>
</feMerge>
</filter>
</svg>
BUT if i remove the primitiveUnits attribute from the filter, i can get the displacement working:
.container {
outline: 1px solid green;
}
h1 {
filter: url(#displacementFilter);
}
<div class="container">
<h1>test</h1>
</div>
<svg width="0" height="0" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<filter id="displacementFilter" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox">
<feFlood flood-color="rgb(255,128,128)" flood-opacity="0.5" result="rect-red" x="0%" y="50%" width="100%" height="50%"/>
<feFlood flood-color="rgb(128,128,128)" flood-opacity="0.5" result="rect-blue" x="0" y="0%" width="100%" height="50%"/>
<feMerge result="rect">
<feMergeNode in="rect-red"/>
<feMergeNode in="rect-blue"/>
</feMerge>
<feDisplacementMap in2="rect" in="SourceGraphic" scale="10" xChannelSelector="R" yChannelSelector="G" result="displacement"/>
<feMerge>
<feMergeNode in="rect"/>
<feMergeNode in="displacement"/>
</feMerge>
</filter>
</svg>
From what i understand, i need the primitiveUnits attribute to be "objectBoundingBox", otherwise i can't use percentages of the original HTML element's bounding box so removing this attribute is not an option. But am i hitting a browser bug here or am i missing something ?
Two small errors. You need to put a % in the x of the second flood.
result="rect-blue" x="0%" y="0%" width="100%" height="50%"
And the scale in your displacement primitive needs to be objectBoundingBox as well - so 0.1 (but that's super big - so I changed it to 0.01 below so you can actually see what's happening).
<feDisplacementMap in2="rect" in="SourceGraphic" scale=".01" xChannelSelector="R" yChannelSelector="G" result="displacement"/>
And in general, it's best to express objectBoundingBox dimensions as decimals - Firefox, at one point at least, wouldn't accept percentages. And it's also best to define your filter higher in the document than the HTML it will apply to (Safari at one point at least, couldn't find the filter if you did it this way).
.container {
outline: 1px solid green;
}
h1 {
filter: url(#displacementFilter);
}
<svg width="0" height="0" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<filter id="displacementFilter" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox">
<!-- building the in2 rectangle for the displacement map -->
<feFlood flood-color="rgb(255,128,128)" flood-opacity="0.5" result="rect-red" x="0" y="0.5" width="1" height="0.5"/>
<feFlood flood-color="rgb(128,128,128)" flood-opacity="0.5" result="rect-blue" x="0" y="0" width="1" height="0.5"/>
<feMerge result="rect">
<feMergeNode in="rect-red"/>
<feMergeNode in="rect-blue"/>
</feMerge>
<!--
applying the displacement.
Depending on the scale, sometimes the source graphic
completely disappears
-->
<feDisplacementMap in2="rect" in="SourceGraphic" scale="0.01" xChannelSelector="R" yChannelSelector="G" result="displacement"/>
<!-- merging the rectangle and the displacement just to show the effect -->
<feMerge>
<feMergeNode in="rect"/>
<feMergeNode in="displacement"/>
</feMerge>
</filter>
</svg>
<div class="container">
<h1>MY AMAZING TEST TEXT</h1>
</div>
I'm trying to omit a table row when a boolean condition is false:
<zk if="${vm.visible}">
<n:tr>
<n:td>
<label value="Should be visible, too" />
</n:td>
</n:tr>
</zk>
When visible is true, the following HTML is rendered:
<tr> </tr>
Why is that?
ZK Fiddle: http://zkfiddle.org/sample/3ikg0ch/3-Weird-bug-with-native-HTML-and-zk-if
The full ZUL:
<zk xmlns:n="native">
<window border="normal" title="hello" viewModel="#id('vm') #init('pkg$.TestComposer')">
<div>
visible=${vm.visible}
</div>
<n:table style="border: 1px solid green;">
<n:tr>
<n:td>
<label value="Visible" />
</n:td>
</n:tr>
<zk if="${vm.visible}">
<n:tr>
<n:td>
<label value="Should be visible, too" />
</n:td>
</n:tr>
</zk>
</n:table>
<n:table style="border: 1px solid red;">
<n:tr>
<n:td>
<label value="Table 2" />
</n:td>
</n:tr>
<zk if="${vm.hidden}">
<n:tr>
<n:td>
<label value="Should be hidden" />
</n:td>
</n:tr>
</zk>
</n:table>
</window>
</zk>
View model:
package pkg$;
import org.zkoss.zk.ui.*;
import org.zkoss.zk.ui.event.*;
import org.zkoss.zk.ui.util.*;
import org.zkoss.zk.ui.ext.*;
import org.zkoss.zk.au.*;
import org.zkoss.zk.au.out.*;
import org.zkoss.zul.*;
public class TestComposer extends GenericForwardComposer{
public boolean isVisible() {
return true;
}
public boolean isHidden() {
return false;
}
}
I'm surprised that doesn't work either but this does: (remove the enclosing zk if=... tag
<n:tr if="${vm.visible}">
<n:td>
<label value="Should be visible, too" />
</n:td>
</n:tr>
The official ZK issue is ZK-4055 and is supposed to be fixed in version 8.6.0
UPDATE:
ZK-4055 has been fixed for 8.6.0 -> testable in 8.6.0.FL.20180917
I'm working on creating an XUL app right now and I'm stuck with a few problems at this point. My current file is here: http://projects.thecloudonline.net/gemxul/regrid.xul.
I want that second column to essentially "float: right" (like how CSS works on webpages). The red background shows me that part moved, but my content is stuck oriented left. How can I make the content go along with it?
Secondly, my overall goal is to get it so that the layout is essentially split in half. Setting maxwidth="50%" on the first column doesn't seem to do anything. Is that the correct approach, or am I way off there?
That's all for now!
This should work :
<grid style="border: #000000 solid 1px;">
<columns>
<column style="border-right: #666666 solid 1px;"/>
<column flex="1"/>
<column style="background-color:red;"/>
</columns>
<rows>
<row>
<vbox>
<label value="Launcher 1" id="l1_title"/>
<button label="button" id="l1_btn" />
<label value="This is a description for item 1." id="l1_desc"/>
</vbox>
<spacer/>
<vbox>
<label value="Launcher 2" id="l2_title"/>
<button label="button" id="l2_btn"/>
<label value="This is a description for item 2." id="l2_desc"/>
</vbox>
</row>
<row style="border-top: #666666 solid 1px;">
<vbox>
<label value="Launcher 3" id="l3_title"/>
<button label="button" id="l3_btn"/>
<label value="This is a description for item 3." id="l3_desc"/>
</vbox>
<spacer/>
<vbox>
<label value="Launcher 4" id="l4_title"/>
<button label="button" id="l4_btn"/>
<label value="This is a description for item 4." id="l4_desc"/>
</vbox>
</row>
</rows>
</grid>
There are several ways of doing this. Personally I wouldn't use grid for something like this. vbox and hbox in combination beats anything you would normally do in tables. But of course it depends entirely what your end goal is.