I'm getting started working with Electron to build a desktop app. How can I customize the window title bar (which contains the close, minimize, and full screen buttons) to add custom views? Safari is an example that I am thinking of:
Your only option in Electron would be to create a frameless (aka borderless) window, and then create a "fake" title bar with CSS, including any UI elements you need.
Electron/webkit provides CSS properties that allows you to make any element draggable, like a titlebar:
.titlebar {
-webkit-user-select: none;
-webkit-app-region: drag;
}
The first, and cross-platform option is to create a frameless window. The second is macOS only, and allows you to hide the title bar, but retain the window controls, allowing for the addition of custom buttons.
Example:
const { BrowserWindow } = require('electron')
// This will create a window without titlebar, allowing for customization
let win = new BrowserWindow({ titleBarStyle: 'hidden' })
win.show()
Then you could use the css properties -webkit-user-select and -webkit-app-region to specify the drag zone.
Hide the default titlebar by creating a frameless window:
// main.js
window = new BrowserWindow({
titlebarStyle: 'hidden',
trafficLightPosition: {
x: 15,
y: 13, // macOS traffic lights seem to be 14px in diameter. If you want them vertically centered, set this to `titlebar_height / 2 - 7`.
},
})
Then create your own makeshift titlebar using HTML + CSS:
<!-- index.html -->
<body>
<header class="titlebar"></header>
...
</body>
/* styles.css */
.titlebar {
background-color: #f0f0f0;
height: 40px;
border-bottom: 1px solid #d0d0d0;
-webkit-app-region: drag; /* Allow user to drag the window using this titlebar */
-webkit-user-select: none; /* Prevent user from selecting things */
user-select: none;
}
The result so far:
Notice that the titlebar appears under the scrollbar. It even moves when the user scrolls. We need to separate it from the scrollable content by wrapping everything below the titlebar in a <div class="main-content"> and then adding these styles:
.main-content {
height: calc(100vh - 40px); /* Force the content to take up the viewport height minus the titlebar height */
overflow: auto; /* Allow the main content to be scrollable */
}
body {
overflow: hidden; /* Make the HTML body be non-scrollable */
}
Final result:
Now you can add whatever HTML content you want up there.
Related
I found a great example of d3.js drag slider https://bl.ocks.org/mbostock/6452972 However I can't use the drag feature using iOS10. How can I enable touch features to this slider?
This is interesting. In that code, the *drag events" are set up on an invisible line painted on top of the slider. Looks like iOS won't reliably honor the touch events on it because it is not stroked or filled. You can get it to work though by changing the css definition on .track-overlay to:
.track-overlay {
pointer-events: stroke;
stroke-width: 50px;
cursor: crosshair;
stroke: black; /*<-- give it a stroke */
opacity: 0; /*<-- but don't show it */
}
How to disable Street View dragging / swiping? This is important especially on mobile devices, where the both the Street View and the whole web page are scrolled by swiping on the screen with a finger. In fact if you try to scroll the page touching with finger a point where you have a Street view, you will scroll the Street view instead of the page.
If the Street view is full-width this may be an usability issue.
Google API does not provide this option, but I managed it to work by placing an invisible div on top of the Street view, preventing the underlying Street View receiving evented. I created a toggle button "Drag Street View / Drag web page). The button can dynamically show/hide Street view controls according to the enabled/disabled state of the Street View.
Example here: http://www.genovaperte.it/item/antico-forno-ursida/
Please see it from a mobile touch device because the toggle button is needed and shown, in my context, only for mobile touch devices. In desktop devices Street View is Always navigable by default because there aren't issues with this.
Outline of the code (here using jQuery and Modernizr):
CSS:
.draggable-street-view-toggle-button { cursor: pointer; background-color: #fff; border: solid 2px #firstThemeColor; z-index: 1000; position: absolute; right: 40px; padding: 10px; } /* the toggle button appearance. right = 40px to not overlap the close button */
.prevent-dragging { position: absolute; width: 100%; height: 400px; z-index: 999; } /* the hidden layer to prevent draggin events reach the underlying Street View */
#directory-main-bar.hide-gmnoprint .gmnoprint { display: none; } /* class dynamically added/removed to toggle controls */
HTML:
<div id="directory-main-bar">
... Here you have to initialize your Street view via Google API or with your preferred jQuery plugin like GMAP3 ...
I recommend these options: defaultDisableUI = false, enableCloseButton : true, and zoomControl : Modernizr.touch ? false : true,
</div>
JS:
function toggleStreetViewControls(state) {
mapDiv = $("#directory-main-bar");
if(!state) {
$('<div class="prevent-dragging"></div>').height(400).insertBefore(mapDiv); /* 400 is the Street View height you've chosen when setupping it */
mapDiv.addClass('hide-gmnoprint');
}
else {
$('.prevent-dragging').remove();
mapDiv.removeClass('hide-gmnoprint');
}
}
if (Modernizr.touch){
var swDraggableButton = $('<div class="draggable-street-view-toggle-button"></div>').insertBefore(mapDiv);
$('<div class="prevent-dragging"></div>').height({!$themeOptions->directoryMap->mapHeight}).insertBefore(mapDiv);
mapDiv.addClass('hide-gmnoprint');
}
swDraggableButton.click(function () {
if($(this).hasClass('active')){
$(this).removeClass('active').addClass('inactive').text({__ 'Drag web page'});
toggleStreetViewControls(false);
} else {
$(this).removeClass('inactive').addClass('active').text({__ 'Drag Street view'});
toggleStreetViewControls(true);
}
});
}
I'm using a sprite image to change the background on hover and click (the .keepImage class is for the click). It all works, but when the background picture changes it scrolls over to the correct position. Is there a way to do it without the scrolling motion?
JS:
<script>
$(document).ready(function(){
$("a.doing").click(function() {
$(this).siblings(".keepImage").removeClass("keepImage");
$(this).addClass("keepImage");
});
});
</script>
CSS:
a.doing {
width: 229px;
height: 202px;
margin-right: 8px;
background: url(http://localhost:8000/img/manifesto/spr_doing.png) 0 0;
}
a.doing:hover, a.doing.keepImage {
background: url(http://localhost:8000/img/manifesto/spr_doing.png) -229px 0;
}
I think, somewhere in your css you have the transition property specified. Usually when you have a transition property specified like this: "transition: all 500ms ease;", the background position will change with a scrolling effect. If you want to prevent this scrolling from happening, then you can either remove the transition property completely, or you can use transition only for the properties you want to animate like - border, color etc.. but not background. If you can somehow provide a link to your page, or give the html mark up and css, it will help. Thanks.
I have a little menu that should expand to reveal the HTML below, which is hidden at present.
Following jQuery:
$('.mobileMenu').click(function(e) {
$(this).toggleClass('arrowDown').next().slideToggle('slow');
});
This piece of code works great on this page (click the "hide" feature on the left col)
However I need to utilise the same feature with my menu for "mobile width".
If you resize your browser down to 320 or so and go here you'll see the menu is just +menu (bit smashy at the mo but working). Click it, and the menu does expand to show the links, but they are hanging over the main content area.
All divs in the navigation div are display:block but they still don't push the main div down. I want the entire green navigation div to expand with it's content.
You have a fixed height on the navigation div of 60px and menuWrapper at 30px. You need to make this relative.
change your css from
#rightCol {
width: 72.5%;
float:right;
}
#leftCol
{
width: 25%;
float:left;
}
to
#rightCol {
width: 72.5%;
display:inline-block;
}
#leftCol
{
width: 25%;
display:inline-block;
}
it should work. I have tested this on chrome
I would like to use Font Awesome icons:
<i class="icon-edit"></i>
in the jqGrid pager area instead of the physical images by default.
.navButtonAdd('#vw_ComplaintSearchGridPager', { caption: '', buttonicon: 'ui-icon-disk', title: 'Save Grid Settings', onClickButton: function () { $(this).SaveGridSetting(); } })
Does anyone know how to achieve this?
It's very interesting question! I never used Font Awesome icons before, but it seems very interesting project.
jqGrid has currently no direct support of Font Awesome icons, but I prepared the simple demo which shows how to replace the standard jQuery UI navigator icons with the corresponding icons from Font Awesome.
One can see mostly clear the difference to the original navigator icons after zoom of the page. I included below the navigator displayed with zoom 400%:
The original navigator using jQuery UI icons
The navigator with Font Awesome icons:
The code which I used is very simple. Instead of usage
$grid.jqGrid("navGrid", "#pager", {view: true});
I used
$grid.jqGrid("navGrid", "#pager", {editicon: "icon-pencil",
addicon: "icon-plus", delicon: "icon-trash", searchicon: "icon-search",
refreshicon: "icon-refresh", viewicon: "icon-file",view: true});
$("#pager .navtable .ui-pg-div>span").removeClass("ui-icon");
I added the CSS
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div>span { margin: 0 5px; font-size: 12px; }
I think it's possible to replace more jQuery UI icons to Font Awesome icons, but it's not very simple. I will think about the problem more and will contact the developer of jqGrid (Tony Tomov) to consider to make jqGrid more friendly to Font Awesome icons, so that it could be possible very simple switch to Font Awesome icons.
UPDATED: I added the code which allows top replace more icons from the pager:
var $pager = $grid.closest(".ui-jqgrid").find(".ui-pg-table");
$pager.find(".ui-pg-button>span.ui-icon-seek-first")
.removeClass("ui-icon ui-icon-seek-first")
.addClass("icon-step-backward");
$pager.find(".ui-pg-button>span.ui-icon-seek-prev")
.removeClass("ui-icon ui-icon-seek-prev")
.addClass("icon-backward");
$pager.find(".ui-pg-button>span.ui-icon-seek-next")
.removeClass("ui-icon ui-icon-seek-next")
.addClass("icon-forward");
$pager.find(".ui-pg-button>span.ui-icon-seek-end")
.removeClass("ui-icon ui-icon-seek-end")
.addClass("icon-step-forward");
As the result one get the following pager:
instead of
UPDATED 2: The code for changing minimizing icon looks a little completer. One should first change the icon initially
$grid.closest(".ui-jqgrid")
.find(".ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close>.ui-icon-circle-triangle-n")
.removeClass("ui-icon ui-icon-circle-triangle-n")
.addClass("icon-circle-arrow-down");
and then change it after every click on the icon:
onHeaderClick: function (gridstate) {
if (gridstate === "visible") {
$(this.grid.cDiv).find(">.ui-jqgrid-titlebar-close>span")
.removeClass("icon-circle-arrow-up ui-icon-circle-triangle-n")
.addClass("icon-circle-arrow-down");
} else if (gridstate === "hidden") {
$(this.grid.cDiv).find(">.ui-jqgrid-titlebar-close>span")
.removeClass("icon-circle-arrow-down ui-icon-circle-triangle-s")
.addClass("icon-circle-arrow-up");
}
}
Additionally one need to add the CSS
.ui-jqgrid .ui-jqgrid-titlebar-close>span { margin: 0 3px; font-size: 16px; }
.ui-jqgrid .ui-jqgrid-titlebar-close { text-decoration: none; }
To fix the sorting icons I used the code
var $sortables = $grid.closest(".ui-jqgrid")
.find(".ui-jqgrid-htable .ui-jqgrid-labels .ui-jqgrid-sortable span.s-ico");
$sortables.find(">span.ui-icon-triangle-1-s")
.removeClass("ui-icon ui-icon-triangle-1-s")
.addClass("icon-sort-down");
$sortables.find(">span.ui-icon-triangle-1-n")
.removeClass("ui-icon ui-icon-triangle-1-n")
.addClass("icon-sort-up");
and the CSS
.ui-jqgrid .ui-icon-asc { height: auto; margin-top: 0; }
.ui-jqgrid .ui-icon-asc, .ui-jqgrid .ui-icon-desc {
height: auto; margin-top: 0; margin-left: 5px;
}
.ui-jqgrid .s-ico>.ui-state-disabled, .s-ico>.ui-state-disabled { padding: 0; }
As the result one will get the following:
UPDATED 3: In the next demo one can find more full replacement of jQuery UI icons to Font Awesome icons.
UPDATED 4: The answer provides solution for Font Awesome version 4.x.
Figured I would put a CSS alternative answer for those interested. One of our developers implemented a JS option, which did functionally work, however, there was a delay before it rendered correctly (not ideal).
We used font-awesome icons for our paging options, and here is how we implemented it.
Found the four classes that jqGrid was using for the paging icons we desired to customize and created the following css to apply base font awesome styles
.ui-icon-seek-next, .ui-icon-seek-prev, .ui-icon-seek-end, .ui-icon-seek-first
{
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
Then it is simply a matter of grabbing the content from font-family icon and using them as your own.
.ui-icon-seek-next:before
{
content: "\f105";
}
.ui-icon-seek-prev:before
{
content: "\f104";
}
.ui-icon-seek-end:before
{
content: "\f101";
}
.ui-icon-seek-first:before
{
content: "\f100";
}
So the entire CSS together looks like this
.ui-icon-seek-next, .ui-icon-seek-prev, .ui-icon-seek-end, .ui-icon-seek-first
{
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.ui-icon-seek-next:before
{
content: "\f105";
}
.ui-icon-seek-prev:before
{
content: "\f104";
}
.ui-icon-seek-end:before
{
content: "\f101";
}
.ui-icon-seek-first:before
{
content: "\f100";
}
And the output on our grid without JS and without delay
By looking at answer from Oleg above, I did the following to simplify things.
Additional CSS
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div>span.fntawsm { margin: 0 5px; font-size: 12px; padding-left:2px;padding-right:2px;}
** padding-left:2px;padding-right:2px; is optional
And this only works with icons only with no caption ...
And then just start adding fontawesome icons in navButtonAdd like
caption:"", // important for above
title:"Give any",
buttonicon:"fntawsm icon-remove"
buttonicon:"fntawsm icon-eject icon-rotate-90"
etc .. You can use all extra functionality from font-awesome like icon-rotate-XX too.
Thisway i did`nt have to remove ui-icon class from spans.
Inspired by #afreeland answer, I created a css available on github which allows you to convert your icons to Font-Awesome icons.
The performance advantage of this over the jquery method that #Oleg described is important in my opinion.
It is also a very elegant solution in my opinion.
You are welcome to use it: https://github.com/guylando/ToAF
Note: you must give priority for this ToAF.css file styles over your other icons styles so that can be achieved for example by copying the css content into a tag in your document.