gtk3 menubutton type header bar - gtk3

I googled this question but haven't found a solution. I'm transitioning from gtk2 to gtk3. I like the way how the menu icons are packed on the header bar. I was able to add a menu button to my header bar but it shows a down arrow button. Is there a way of changing this to a icon that has 3 lines.
This is exactly how I want it to be:
My present code looks like this
header_bar = gtk_header_bar_new();
gtk_header_bar_set_show_close_button (GTK_HEADER_BAR (header_bar), TRUE);
gtk_header_bar_set_title(GTK_HEADER_BAR(header_bar),PRG_NAME);
gtk_header_bar_set_subtitle(GTK_HEADER_BAR(header_bar),tool_version);
//gtk_header_bar_set_decoration_layout(GTK_HEADER_BAR(header_bar), "menu,minimize,maximize,close");
gtk_window_set_titlebar (GTK_WINDOW (window), header_bar);
//menu_popover = gtk_menu_new();
menubar = gtk_menu_button_new();
gtk_header_bar_pack_end(GTK_HEADER_BAR(header_bar),menubar);

If you use a XML file to store the ui, you can customize the icon like this:
<object class="GtkMenuButton" id="button_header_menu">
<property name="image">image_header_menu</property>
</object>
<object class="GtkImage" id="image_header_menu">
<property name="visible">True</property>
<property name="icon_name">open-menu-symbolic</property>
</object>
if not, you can do it this way:
icon = Gio.ThemedIcon(name="open-menu-symbolic")
image = Gtk.Image.new_from_gicon(icon, Gtk.IconSize.BUTTON)
button_header_menu.get_child().destroy()
button_header_menu.add(image)
button_header_menu.show_all()
I code in python, but it should be pretty straightforward to port this bit of code.

Thanks for putting me on the right track. below is how i did it
header_bar = gtk_header_bar_new();
gtk_header_bar_set_show_close_button (GTK_HEADER_BAR (header_bar), TRUE);
gtk_header_bar_set_title(GTK_HEADER_BAR(header_bar),PRG_NAME);
gtk_header_bar_set_subtitle(GTK_HEADER_BAR(header_bar),tool_version);
//gtk_header_bar_set_decoration_layout(GTK_HEADER_BAR(header_bar), "menu,minimize,maximize,close");
gtk_window_set_titlebar (GTK_WINDOW (window), header_bar);
//menu_popover = gtk_menu_new();
menu = gtk_button_new_from_icon_name("open-menu-symbolic", GTK_ICON_SIZE_BUTTON);
gtk_header_bar_pack_end(GTK_HEADER_BAR(header_bar),menu);

Related

GridToolbarColumnsButton change copy

I have a this custom toolbar and I want to change the display copy, but I don't see a prop on the <GridToolbarColumnsButton /> that will let me do that. Does anyone know how to change the text and icon on the <GridToolbarColumnsButton /> component.
function CustomToolbar() {
return (
<GridToolbarContainer>
<GridToolbarColumnsButton />
<GridToolbarFilterButton />
</GridToolbarContainer>
);
}
For the text, you can override the locals via the localeText prop of the DataGrid component
For the other props of this component, you will have to provide your own toolbar. It is a very basic component so copy pasting it is not a big issue.
Here is an example: https://codesandbox.io/s/datagrid-v5-quick-start-forked-d3s3r?file=/src/App.tsx

Done button does not appear for keyboard type Ti.UI.KEYBOARD_DECIMAL_PAD

I created a textfield with this properties:
keyboardType: Ti.UI.KEYBOARD_DECIMAL_PAD
returnKeyType: Ti.UI.RETURNKEY_DONE
I tested this on a iphone device. The decimal pad appears but has no done button.
I also tried with other button types, without success. It seems that it is not possible to set the returnKeyType for the KEYBOARD_DECIMAL_PAD.
When I change the keyboardtype to KEYBORD_DEFAULT or KEYBOARD_NUMBERS_PUNCTUATION it works.
The last option (KEYBOARD_NUMBERS_PUNCTUATION) is an alternative that I can use but can someone tell me why it's not working with the KEYBOARD_DECIMAL_PAD?
Thanks.
KEYBOARD_DECIMAL_PAD doesn't provide a done Button. You must add a KeyboardToolbar on your TextField to add a Button which close your keyboard, like this :
in your .xml
<TextField id="textfield">
<KeyboardToolbar platform="ios">
<Toolbar>
<Items>
<Button title="Done" onClick="hideKeyboard" />
</Items>
</Toolbar>
</KeyboardToolbar>
</TextField>
in your .js
function hideKeyboard(e){
$.textfield.blur()
}
As Provided in archived answers
there is just a work around for this Issue .
which is to add a Done button to the softkeyboard buttons toolbar
https://archive.appcelerator.com/question/123421/done-button-on-numeric-keypad-can-this-be-done-in-appcelerator
to simplyfy the answer:
var doneButton = Ti.UI.createButton({ systemButton: Ti.UI.iPhone.SystemButton.DONE });
$.creditNum_txt.keyboardToolbar = [doneButton];
$.creditNum_txt.addEventListener('focus', function(e) {
$.creditNum_txt.keyboardToolbar = [doneButton];
doneButton.activeFld = $.creditNum_txt;
});
doneButton.addEventListener('click', function(e) {
e.source.activeFld.blur();
});

How to lay out a perspective to make the left region with two parts: top and bottom?

Tried both Programmatic and Declarative way but failed, and I just wanna make the left region lay out like below. Any hints?
Create a folder for the left column and then put two more folders in the column:
IFolderLayout leftOuter = layout.createFolder("left.outer", IPageLayout.LEFT, 0.23f, IPageLayout.ID_EDITOR_AREA);
IFolderLayout leftTop = layout.createFolder("left.top", IPageLayout.TOP, 0.5f, "left.outer");
// TODO add views and placeholders to leftTop
IFolderLayout leftBottom = layout.createFolder("left.bottom", IPageLayout.BOTTOM, 0.5f, "left.outer");
// TODO add views and placeholders to leftBotton
Finally I've found a declarative way to handle this
(which is inspired by the layout of Eclipse internal CVS Repositories Exploring perspective and decompiled its source code)
plugin.xml
<!-- ************** Perspective Extensions START **************** -->
<extension
point="org.eclipse.ui.perspectiveExtensions">
<perspectiveExtension targetID="$YOUR_PERSPECTIVE_ID$">
<view
closeable="false"
id="$BOTTOM_VIEW_ID$"
moveable="false"
ratio="0.6"
relationship="bottom"
relative="$TOP_VIEW_ID$"
showTitle="true"
standalone="true">
</view>
</perspectiveExtension>
</extension>

Why my webview covered popup in metro app?

I want to make a setting panel in my metro app.
I added a main page with webview like this:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Class="App.MainPage"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<WebView x:Name="MainWebView"/>
</Grid>
and use this code to display my popip window
_settingsPopup = new Popup();
_settingsPopup.Closed += OnPopupClosed;
Window.Current.Activated += OnWindowActivated;
_settingsPopup.IsLightDismissEnabled = true;
_settingsPopup.Width = _settingsWidth;
_settingsPopup.Height = _windowBounds.Height;
SettingsPanel mypane = new SettingsPanel();
mypane.Width = _settingsWidth;
mypane.Height = _windowBounds.Height;
_settingsPopup.Child = mypane;
_settingsPopup.SetValue(Canvas.LeftProperty, _windowBounds.Width - _settingsWidth);
_settingsPopup.SetValue(Canvas.TopProperty, 0);
_settingsPopup.IsOpen = true;
but, finally the popup can't be displayed and when i set the webview to be hidden ,I found the popup behind the webview.
I can't found any function or properties to set the zindex or sth like zindex to help me taking the popup to the front.
How can I make it correct?
The behavior is by design as the WebView will always assume the topmost position. The recommended solution is to either hide the WebView as you popup, or to use the WebViewBrush as a placeholder when your popup is displayed.
There are lots of tutorials on the web, I personally recommend this article:
How to display charms on a top of the WebView

GXT3 VerticalLayoutContainer height bug

I little speak english :( (i use gtranslate...)
I create GWT2.5(with requestfactory)+GXT3 MVP application
My Main View is a BorderLayout
west: shortcut panel(verticalLayoutContainer)
south: toolbar (status)
north: toolbar (menu)
my codes:
DesktopView.ui.xml (Main view):
http://pastebin.com/xbeUzDwi
DesktopView.java
http://pastebin.com/WguE6CVf
DesktopActivity.java
http://pastebin.com/adejJwu0
about grid view:
http://pastebin.com/nFPrGpd1
my MVP auto call createGrid()
error image(pagingToolbar)
if i replace in gridView
verticalLayoutContainer.add(grid, new VerticalLayoutData(1, -1)); => verticalLayoutContainer.add(grid, new VerticalLayoutData(1, 1));
error image(do not show grid)
what is the problem my code ? ???
but if i add code to DesktopActivity:
public void onEvent(....){
.
.
DesktopActivity.getContentPanel().setWidget(event.getWidget());
if (event.getWidget() instanceof VerticalLayoutContainer) {
((VerticalLayoutContainer) event.getWidget()).onResize();
}
direct call onResize, then there is no problem if you add...
this GXT3 bug or I make a mistake on something
Thank you in advance for your help
The BorderLayoutContainer does not automatically find the size of the edge components. You will have to define the sizes of these areas manually.
<ui:with type="com.sencha.gxt.widget.core.client.container.BorderLayoutContainer.BorderLayoutData"
field="northData">
<ui:attributes size="30" />
</ui:with>
This section says that the north section of the container should be 30 pixels high. The same can be done for all edges.