I try to develop my Firefox addon and I would like to have a menu similar to Firebug, a menu-button with a picture. Here is what I mean:
I tried to set the image attribute, with CSS but the picture is never displayed.
Anyone have an idea or an example?
The MDN page on menu-button has an example that should work for you in an overlay. Here is an adaptation that could be inserted into your overlay (with the style suggestion from Wladimir):
<toolbarbutton type="menu-button" label="" style="list-style-image: url('http://cdn.sstatic.net/stackoverflow/img/favicon.ico')">
<menupopup>
<menuitem label="Save This Document"/>
<menuitem label="Save All" oncommand="alert('Save All'); event.stopPropagation();"/>
</menupopup>
</toolbarbutton>
Related
I'm having a problem with the following code:
<p:lightBox iframe="true" widgetVar="dlg">
<h:outputLink value="apply.flow" title="Apply">
<p:commandButton value="Start" />
</h:outputLink>
</p:lightBox>
The windows comes up as expected and works well. However the lightbox effect is not being displayed (the screen is not darkening as it does on the PrimeFaces demo website). I've tried several browsers so that's not an issue and there are no JS errors being thrown.
Any pointers would be greatly appreciated!
cheers,
--Stu
Thanks for the comments / pointers on this. Using Firebug I managed to find the offending override for the opacity of the overlay and fixed the issue.
I cannot find a way to pick the arrow icons like the ones present in the PickList component, in order to use them in other CommandButtons.
Well, I know that in order to use an icon in CommandButton, one has to follow these instructions:
<p:commandButton outcome="target" icon="star" title="With Icon"/>
having defined the star icon in a css file:
.star {
background-image: url("images/star.png");
}
but I would prefer to use exactly the same arrows as for the PickList component.
Here a list of all available jQuery UI icons
jQueryUI Icons Cheatsheet N#1 (click on Toggle text to get all the names of the icons)
jQueryUI Icons Cheatsheet N#2
at least in <p:commandLink you can apply the icons using styleClass for example styleClass="ui-icon ui-icon-trash" (don't remember trying the same on p:commandButton - always preferred <p:commandLink)
B.T.W , <p:commandButton has no outcome attribute , <p:button has it...
In addition since PF v5.1.1 you can also use the icons of Font Awesome out of the box, by setting to true the primefaces.FONT_AWESOME context param , like this
<context-param>
<param-name>primefaces.FONT_AWESOME</param-name>
<param-value>true</param-value>
</context-param>
and using it like this:
<p:commandButton value="Download" icon="fa fa-download" type="button"/>
or
<p:menuitem value="Refresh" url="#" icon="fa fa-refresh"/>
See showcase: PrimeFaces - FontAwesome - Since v5.1.1
Primefaces use jQuery themeroller for styling UI. All of the used icons in Primefaces are from there. Just mouseover icon you like (in themeroller) and something like : .ui-icon-arrow-1-e will pop. Then use it like this:
<p:commandButton action="target" icon="ui-icon ui-icon-arrow-1-e" value="Arrow icon"/>
Try this it worked for me
.star {background:url("images/star.png") no-repeat !important;
width:20px;
height:16px;
}
I'm creating a WP Mango app. I want to set the default page background to White, irrespective of whether Light or Dark Theme is selected, exactly like the default mail application.
I've followed this article and tried changing the default PhoneBackgroundBrush as:
(Application.Current.Resources["PhoneBackgroundBrush"]as SolidColorBrush).Color = Colors.White;
Any idea what I'm doing wrong or how to achieve that?
I messed with the sample, and simply don't recommend doing this. Do the extra work, create your own resources, and apply them yourself.
This method doesn't show updates in the designer, which will make your UI development difficult.
It also doesn't even work properly -- the background doesn't change. If you read the comments on the blog post, there are other issues with it working with other controls.
So, just do it normally - in your App.xaml (you could also do it in a seperate ResourceDictionary)
<!--Application Resources-->
<Application.Resources>
<SolidColorBrush Color="White" x:Key="WhiteBrush" />
<SolidColorBrush Color="#FFF222" x:Key="UglyYellowBrush" />
</Application.Resources>
then, on a page
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="{StaticResource UglyYellowBrush}">
... </Grid>
You could even do this quickly on all your pages using Find & Replace, provided that you never changed the name 'LayoutRoot'. If you find
<Grid x:Name="LayoutRoot" Background="Transparent">
you can replace with
<Grid x:Name="LayoutRoot" Background="{StaticResource UglyYellowBrush}">
The solution of creating your own style did not work for me. I tried setting the background to a light gray which worked in the design view but when I ran the emulator the standard black background appeared.
I want to ask some questions:
What steps should I do to make the interface on mozilla firefox and handle all these interfaces.
interfaces that I want to make are:
status bar that consists of labels and pictures and if the status bar on the right click menu will display the active addons (addons menu inactive hidden) and preferences.
current web page on the right click, on the browser will display a context menu "terjemahkan" and there are pictures on the left-hand corner.
when I select the options button on the tools menu >> addons, users can adjust these addons settings with the radio buttons
when the context menu is selected then the browser window will show the desired results
the steps that I have done is:
i was made the status bar but why the picture I want not to appear when I've made as directed. as well as on the context menu, the image can not appear in the upper left corner of the menu like in general.
<?xml version="1.0"?>
<overlay id="inline_trans"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml">
<!--
<script type="application/x-javascript" src="chrome://translator/content/script.js" />
<script type="application/x-javascript" src="chrome://translator/content/interface.js" />
-->
<!-- menu klik kanan pada halaman web -->
<popup id="contentAreaContextMenu">
<menuseparator />
<menuitem id="intransContextMenuPage"
image="chrome://inlinetrans/skin/imagesOn_kecil.png"
label="terjemahkan dengan intrans"
oncommand="inline.script.getText()" />
</popup>
<!-- pilihan menu pada status bar -->
<popupset>
<menupopup id="intransContextMenu">
<menuitem label="intrans nonaktif"
image="chrome://inlinetrans/skin/imagesOff_kecil.png"
hidden="true"/>
<menuitem label="intrans aktif"
image="chrome://inlinetrans/skin/imagesOn_kecil.png"
hidden="false"/>
<menuseparator />
<menuitem label="preferensi"/>
</menupopup>
</popupset>
<!-- ========================================= -->
<!-- statusbar-->
<statusbar id="status-bar">
<statusbarpanel id="status-bar-intrans"
image="chrome://inlinetrans/skin/imagesOn_kecil.png"
label="intrans"
context="intransContextMenu"
tooltiptext="intrans versi 1.0"
/>
</statusbar>
</overlay>
UI options preferences
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<!DOCTYPE overlay SYSTEM "chrome://inlinetrans/locale/options.dtd">
<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
id="translate-preferences"
title="&options.title;"
buttons="accept, cancel"
style="padding:0px; margin:0px;"
ondialogaccept="options.save()"
onload="options.init();"
onunload="options.deconstruct();">
<!--
<stringbundleset id="stringbundleset">
<stringbundle id="locale-properties" src="chrome://translator/locale/translator.properties"/>
<stringbundle id="properties" src="chrome://translator/content/translator.properties"/>
</stringbundleset>
-->
<!--
<script src="chrome://inlinetrans/content/options.js" />
-->
<description value="&options.desc;"
style="
background: #fff url('chrome://inlinetrans/skin/options.png') no-repeat;
min-width:400px;
min-height:40px;
padding-left:55px;
padding-top:10px;
margin:0px;
border-bottom: 2px solid #757575;
font-size:1.5em;"/>
<vbox style="padding:10px;">
<groupbox>
<caption label="&options.ui;"/>
<label value="&options.results.desc;"/>
<radiogroup id="display.results" style="padding-left:20px;">
<radio id="results.cat" value="category" label="&options.results.cat;"/>
<radio id="results.noncat" value="noncategory" label="&options.results.noncat;"/>
</radiogroup>
</groupbox>
</vbox>
</dialog>
The most confusing thing for me is how I do all the handler interface.
for example:
change the status of addons, from active to inactive
take the value of the selected radio button
I cannot give you an answer to all of your questions, partly because I don't know exactly what you want, but here is a start:
To show an image next to the menu item, you have to give the element the class menuitem-iconic as described in the documentation:
<menuitem id="intransContextMenuPage"
class="menuitem-iconic"
image="chrome://inlinetrans/skin/imagesOn_kecil.png"
label="terjemahkan dengan intrans"
oncommand="inline.script.getText()" />
I'm not sure for the statusbar, by I would follow the description in the documentation:
The following classes may be used to style the element. These classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme.
statusbarpanel-iconic
Use this class to have an image appear on the statusbarpanel. Specify the image using the src attribute. The image will appear instead of the label.
You can get the value of the selected radio button by getting a reference to the radiogroup,access its property selectedItem which gives you a radio element and read the value property:
var value = document.getElementById('display.results').selectedItem.value;
I have some problems
1. how do I make my statusbar context menu that consists of 2 choices of menu preferences and addons status
example of context menu i want to make
this is my code :
<popupset>
<menupopup id="intransContextMenu">
<menuitem label="intrans aktif"/>
<menuitem label="preferensi"/>
</menupopup>
</popupset>
<statusbar id="status-bar">
<image src="chrome://inlinetrans/skin/imagesOn_kecil.png" />
<statusbarpanel id="status-bar-intrans"
label="intrans"
context="intransContextMenu"
onclick="alert('okeh cuy')"
tooltiptext="intrans versi 1.0"
/>
</statusbar>
how to add images in the context menu? I have tried but why do I paste a picture that always appears under the label is not on the side of the label as I expected?
example of context menu i want to make
this is my code :
<popup id="contentAreaContextMenu">
<image src="chrome://inlinetrans/skin/imagesOn_kecil.png" />
<menuitem class="inlinetrans" id="inlineContext" oncommand= "hadits_mean.startFind(null);"
label="Cari Terjemahan"/>
</popup>
note :
whether the code used to display the menu by right clicking on the statusbar and allows web pages to be made in one file?
thank you for the answer..
I am not sure if the images are your only problem now? Opening the context menu should work (you are using the context attribute correctly).
Regarding images, have a look at the documentation. For statusbarpanel, you have to set the image attribute:
<statusbar id="status-bar">
<statusbarpanel id="status-bar-intrans"
image="chrome://inlinetrans/skin/imagesOn_kecil.png"
label="intrans"
context="intransContextMenu"
onclick="alert('okeh cuy')"
tooltiptext="intrans versi 1.0"
/>
</statusbar>
You might also want to have a look at the style classes and play with them (to be honest I'm not 100% sure if it is just sufficient to set the image attribute, so if this does not work, try with the style classes).
Similar for the menuitem. You have to set the image attribute and give the element the style class menu-iconic:
<menuitem class="inlinetrans menu-iconic"
id="inlineContext"
oncommand= "hadits_mean.startFind(null);"
label="Cari Terjemahan"
image="chrome://inlinetrans/skin/imagesOn_kecil.png"/>
Note: Afaik the statusbar is going to be removed in Firefox 4 (at least by default it is disabled)!