I would like to create a custom message box layout to my application.
I want the header to hold the icon next to the window title.
I want the header to have a bottom border ( this can be achieved by CSS I think)
I want this layout to be on all of my message boxes.
Where do I determined the layout of the window ?
I have looked for the window TPL but could not find it...
To show the icon in the header next to the title, instead of using the icon configuration, use the iconCls configuration. While the icon config is overridden in Ext.window.MessageBox, iconCls is not.
The bottom border and the icon, you will define them in your own css file. I'm not sure if you can limit the bottom border only to messageboxes, and not have the in other windows.
An example css can look like this:
.x-window-header .x-box-inner {
border-bottom: 1px solid #333;
}
.msg-question {
background-image: url('questionmark-icon.png');
}
Your message box would be like:
Ext.Msg.show({
title:'Save Changes?',
msg: 'Would you like to save your changes?',
buttons: Ext.Msg.YESNOCANCEL,
iconCls: 'msg-question'
});
Related
I was using Audacity with a GTK 3 theme I created. On some of the dialog boxes the background comes up as a solid black color, while the theme's background color is a light yellow. I noticed this happens only on some of the dialog boxes.
Below is an image of the Compressor dialog.
I want to know how to get the proper background color, as I checked some other themes with GTK Inspector and they render correctly.
The code for the gtk-widgets.css file is on this GitHub page.
Perhaps you can try:
window > box > widget > widget { background-color:yellow; }
The default PrimeNG menubar includes a little down arrow next to every main menu title. I want to remove the down arrows completely from the top-level menu title. Nested sub-menus may display a right arrow to show there is a sub-menu, and those can stay. Here are some screenshots with default menubar:
https://www.primefaces.org/primeng/showcase/#/menubar
I can change the icons in the menu items easily, but can't find a handle to change/hide the arrows.
I'm using Angular CLI 9.1.8 and PrimeNG 9.1.0.
to hide it in style.css change its content like
.pi-caret-down::before{
content: "";
}
check in developer console inspect element font name then make its before css as content: "";
Using display:none has the added benefit of resizing the menuitem container to adjust for the removed arrow icon. Otherwise, you will be left with a blank space.
.pi-caret-down {
display:none;
}
The title says it all. How do you go about doing this? For example, editing the width of a file upload button results in this: http://i.imgur.com/jacnps2.png For comparison, here's an ordinary file upload button: http://i.imgur.com/tIy05HA.png
The red rectangle represents the area the button normally takes up. In addition, when you hover your cursor over that spot (except for where the red and blue rectangles overlap), your cursor will transform into a hand icon, indicating that something will happen when you click that area. However, nothing happens.
The blue rectangle represents what portion of the screen you can click (which is mostly invisible, and much smaller than usual) to make the file upload form appear.
Trying to edit the file upload button's height yields similar results, only vertically instead of horizontally.
For the sake of explaining what my goal is: I'd like to overly a transparent or invisible file upload button on top of user avatars on my website. So far I've pulled off the easy parts, making the file upload button transparent and overlaying it on top of a user's avatar, but I haven't figured out how to edit the usable dimensions of the file upload button. For a working example of this, if you have a facebook profile, go to your profile and hover your mouse over your avatar. The words "Update Profile Picture" will appear and you can click them to edit your avatar directly from your profile instead of having to go to a separate settings page.
You can't style the file upload buttons, they are native to the browser and rendered differently in different browsers. All those styles file upload buttons are not actual file upload buttons but are simulating the file upload button's behaviour.
There are different approaches to this using CSS and Javascript. Most of them involve hiding the native button and placing a custom button on top it using position: absolute and opacity CSS properties and simulating the click on native button when clicked on the custom button.
As there are quite some solutions on the web to this, I will refer you to those instead of posting a solution here.
See below:
http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/
http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
Cross-browser custom styling for file upload button
I did it with an after element and an icon from FontAwesome
# your-page.html.erb
<div>
<label class="button-image">
<%= f.file_field :attachment, value: "", class: "active-storage-button" %>
</label>
</div>
# app/assets/stylesheets/your-page.scss
.button-image:hover::after {
content: "\f196";
font: normal normal normal 100px/1 FontAwesome;
color: #778899;
padding: 10%;
right: 10%;
position: relative;
}
.active-storage-button{
display: none;
}
# for hover effect
.button-image:hover::after {
color: #5a5a5a;
cursor: pointer;
}
Example of Sencha Touch loadmask: here
Is there any way to customize the loadmask properties without needing to create a new one? I want to increase the size of the darker grey box (i think its the inner-mask right?) because i want to use html to make the loadmask looks better. But with box that has a size like that, there's little thing that you can do to make the loadmask looks better.
masked: {
xtype: 'loadmask',
message: 'Now Loading..',
}
How would i set that darker grey box size? I tried with height and width but that one modifies the whole loadmask size, not the darker grey box area.
i tried some, here is the result.
Solution 1
{
xtype: 'loadmask',
id : 'testMask',
message: 'Now Loading..'
}
CSS
div#testMask{
font-size: 20.95px;
}
it's working but note that it will increases font size.
Solution 2
CSS
.x-mask .x-loading-spinner-outer {
min-width: 20.5em !important;
height: 19.5em !important;
}
it's also working, but it overrides the existing style.
After trying to find a solution for Centering Text on a Button with Offset, I'm doing now a custom component.
The goal is to make a button-like component that has an icon on one side and a centered text filling the rest of the button.
The component contains either two Label/ Buttons to display the Icon and text. Both of them have a background Image, defined in css.
The css looks like this for Icon and the text with exchanged image as background for text
#button-icon-cancel{
-fx-font-family: "Arial";
-fx-padding: 0,0,0,0;
-fx-background-color: transparent;
-fx-font-size: 28px;
-fx-graphic: url('images/button/cancel.png');
}
#button-icon-cancel:pressed{
-fx-graphic: url('images/button/cancel-pressed.png');
}
The images are loaded by setId(). Currently both components are added to a Panel before passing to the stage. They contain an OnClickEvent for processing.
Now to the actual question
How can I achieve that if one Component is clicked, the other one is getting the :pressed from css as well?
Adding the ClickEvent to the Panel is doing nothing (regarding clicking on either Label/ Button)
Adding both of them to a HBox, adding the Event to the HBox work in that regard, that I can click either component and the Event gets fired, BUT the :pressed State is only applied to the component you clicked.
Is it possible to give all childs the notification, that they should behave like they got pressed? Since we have a lot of small Icon, but only one background for the text, placing a Label over the whole thing create a lot of unneeded wasted Image space. Also this would cause the problematic for changing font color if not all css are changed at once (the label-over-button-solution with .setMouseTransparent(true) wouldn't change the font color of the text label since the label doesn't notice button is pressed)
First of all, JFX-8 will support wider range of css improvements, which will allow you to solve the issue easier.
To solve your issue, i can suggest the following : each node have a pressed property. You can add a listener on this property, and when it changes to true, use setStyle(String) method on needed nodes, and use setStyle(null | "") on changing to false.