How to prevent awesome from changing focus when a mouse click occurs? - awesome-wm

I'm using AwesomeWM 4.2 under Xfce4.
I'm using xfpanel. In rc.lua, I have done the following to prevent the xfpanel getting focus:
-- from https://github.com/zhangkun83/awesome-config/blob/d947e70041fad3e5f34bb832162cacaac62736b1/rc.lua#L492)
{ rule = { type = "dock" },
properties = {
border_width = 0,
titlebars_enabled = false,
focusable = false
}},
This works insofar as now, I cannot put the focus on the xfpanel client using keyboard conrtrols.
However, when I click somewhere on the xfpanel (e.g., open the whisker menu, or click on the NetworkManager applet, ...), Awesome makes xfpanel the focused client.
I don't like this behavior because it means I have to explicitly shift focus back to where I was working before.
Is there a way to prevent awesome from changing focus when a mouse click
occurs?

If you don't want the default settings for docks, make that rule ignore "dock" clients. With this I mean: Find the awful.rules-rule with rule = {}, and change this into rule = {}, except = { type = "dock" },.
Since this default rule sets up button bindings (buttons = clientbuttons), this means that dock-clients will no longer get these button bindings.

Related

Awesomewm: How to make a not-focusable client (google-chrome in Ubuntu) in default focusable?

I want to make Google chrome focusable while using awesomeWM in Ubuntu 18.04. How can I do it?
I'm new to use awesomeWM as a window manager in Ubuntu 18.04, and I prefer Google chrome (not chromium, because my password manager don't work). I installed Chrome as a .deb package in official.
However, in default, Chrome spawned by <mod> + r and google-chrome cannot be focused by <mod> + space and don't obey to layouts.
Besides I found google-chrome's WM_CLASS is Google-chrome by xwininfo and xprop and refered to the doc, I added this code in my rc.lua:
{ rule = { class = "Google-chrome" },
properties = { focusable = true }
},
And reboot. I expect this code enables google-chrome focusable, but it was still not focusable.
How do I correct the code?
Is the problem that the window is not focusable or that it cannot be tiled? Based on your description, I wonder if Chrome is defaulting to a maximized state. If you're able, try pressing <mod> + m to unmaximize the client. If that works, add maximized_vertical = false and maximized_horizontal = false to the rule:
{ rule = { class = "Google-chrome" },
properties = { focusable = true,
maximized_vertical = false,
maximized_horizontal = false }
},

disable animation in BrowseFragment when selected item change

I want to disable the default animation on items in a BrowseFragment when they are selected ie scaling animation and the change of position. I want the items to stay where they are and not change their size when selected.
So far I tried various things on my ListRowPresenter object like setting the OnItemViewSelectedListene to null but without successful effect.
How can I achieve this ? (I'm using the version 26 of the leanback library)
You can set the zoom factor for the animation to none by passing in ZOOM_FACTOR_NONE to the constructor of the ListRowPresenter.
There is a constructor for ListRowPresenter to control the animation (focusZoom).
From the documentation:
ListRowPresenter (int focusZoomFactor)
Constructs a ListRowPresenter with the given parameters.
Parameters
focusZoomFactor int: Controls the zoom factor used when an item view is focused. One of ZOOM_FACTOR_NONE, ZOOM_FACTOR_SMALL, ZOOM_FACTOR_XSMALL, ZOOM_FACTOR_MEDIUM, ZOOM_FACTOR_LARGE Dimming on focus defaults to disabled.
Example:
ArrayObjectAdapter adapter =
new ArrayObjectAdapter(new ListRowPresenter(ZOOM_FACTOR_NONE));
setAdapter(adapter);
ArrayObjectAdapter rowAdapter =
new ArrayObjectAdapter(new MyCardViewPresenter(getContext()));
HeaderItem header = new HeaderItem("Header Title");
ListRow row = new ListRow(header, rowAdapter);
for (Video video : videos) {
rowAdapter.add(video);
}
adapter.add(row);

Pulling a style from a TinyMCE selection

I'm trying to implement a TinyMCE button that will apply the style of the selection to the entire box. I'm having trouble, though, reading the style of the selection when the selection is buried in a span in a span in a paragraph. Let's consider 'color' for example. Below I have a box with some text and I've selected "here" in the paragraph and made it red.
The HTML for the paragraph is now:
The code behind my button to apply the style of the selection to the box is
var selected_color = $(ed.selection.getNode()).css('color');
console.log("color pulled is ", selected_color);
$(ed.bodyElement).css('color', selected_color);
It doesn't work because the color pulled is black, not red, so the third line just re-applies the black that's already there. (If I replace selected_color in the third line with 'blue' everything goes blue.) So the problem is pulling the color of the current selection.
Does anyone know how I can do this reliably, no matter how buried the selection is?
Thanks for any help.
I also noticed somewhat a strange behavior up and there, with selections of nested span's and div's, but honestly i'm not able to recognize if this is a bug of TinyMCE, a browser issue or a combination of both (most probably).
So, waiting for some more information from you (maybe also your plugin code) in the meanwhile i realized two proposal to achieve what you want: the first plugin behaves like the format painter in word, the second is simply applying the current detected foreground color to the whole paragraph.
As you move throug the editor with the keyboard or mouse, you will see the current detected foreground color highlighted and applied as background to the second plugin button.
Key point here are two functions to get the styles back from the cursor position:
function findStyle(el, attr) {
var styles, style, color;
try {
styles = $(el).attr('style');
if(typeof styles !== typeof undefined && styles !== false) {
styles.split(";").forEach(function(e) {
style = e.split(":");
if($.trim(style[0]) === attr) {
color = $(el).css(attr);
}
});
}
} catch (err) {}
return color;
}
function findForeColor(node) {
var $el = $(node), color;
while ($el.prop("tagName").toUpperCase() != "BODY") {
color = findStyle($el, "color");
if (color) break;
$el = $el.parent();
}
return color;
}
The try...catch block is needed to avoid some occasional errors when a selected text is restyled. If you look at the TinyMCE sorce code you will notice a plenty of timing events, this is a unavoidable and common practice when dealing with styles and css, even more with user interaction. There was a great job done by the authors of TinyMCE to make the editor cross-browser.
You can try out the first plugin in the Fiddle below. The second plugin is simpler as the first one. lastForeColor is determined in ed.on('NodeChange'), so the code in button click is very easy.
tinymce.PluginManager.add('example2', function(ed, url) {
// Add a button that opens a window
ed.addButton('example2', {
text: '',
icon: "apply-forecolor",
onclick: function() {
if(lastForeColor) {
var applyColor = lastForeColor;
ed.execCommand('SelectAll');
ed.fire('SelectionChange');
ed.execCommand('forecolor', false, applyColor);
ed.selection.collapse(false);
ed.fire('SelectionChange');
}
return false;
}
});
});
Moreover: i think there is a potential issue with your piece of code here:
$(ed.bodyElement).css('color', selected_color);
i guess the style should be applied in a different way, so in my example i'm using standard TinyMCE commands to apply the foreground color to all, as i wasn't able to exactly convert your screenshot to code. Please share your thoughts in a comment.
Fiddle with both plugins: https://jsfiddle.net/ufp0Lvow/
deblocker,
Amazing work! Thank you!
Your jsfiddle did the trick. I replaced the HTML with what was in my example and changed the selector in tinymce.init from a textarea to a div and it pulls the color out perfectly from my example. The modified jsfiddle is at https://jsfiddle.net/79r3vkyq/3/ . I'll be studying and learning from your code for a long time.
Regarding your question about
$(ed.bodyElement).css('color', selected_color);
the divs I attach tinymce to all have ids and the one the editor is currently attached to is reported in ed.bodyElement. I haven't had any trouble using this but I have no problem using your
ed.execCommand('SelectAll');
ed.fire('SelectionChange');
ed.execCommand('forecolor', false, applyColor);
Thanks again! Great job!

Scrolling a browser window with modal window, Drupal 6

I'm using Drupal 6 + dialog.module, Ctools(Axaj), jQuery 1.3.2, jQuery UI
When i'm open a modal dialog window the scrollbar of the browser is locked. I can scroll that if i use mouse scroll-wheel, but not by clicking or key-up, key-down functions.
What is the trouble? I can't find any block function in code like this:
sites/all/modules/dialog/dialog.js
Drupal.CTools.AJAX.commands.dialog_display = function(command) {
var $el = Drupal.Dialog.dialog,
o = {},
overrides = {};
// Ensure that the dialog wasn't closed before the request completed.
if ($el) {
$el.html(command.output).dialog('show');
// Merge all of the options together: defaults, overrides, and options
// specified by the command, then apply them.
overrides = {
// Remove any previously added buttons.
'buttons': {},
'title': command.title,
//'maxHeight': Math.floor($(window).height() * .8), // HACK // DISABLED
'minHeight' : 700, // HACK // I've set it, and dialog window automagically adjusted - we need central part with content have height = auto, so there is no scroll bar, and hence no problems with autocomplete popups in dialog windows
};
o = $.extend({}, Drupal.settings.Dialog.defaults, overrides, command.options);
$.each(o, function (i, v) { $el.dialog('option', i, v); });
if ($el.height() > o.maxHeight) {
$el.dialog('option', 'height', o.maxHeight);
$el.dialog('option', 'position', o.position);
// This is really ugly, but dialog gives us no way to call _size() in a
// sane way!
$el.data('dialog')._size();
}
Drupal.attachBehaviors($el);
}
};
And i didn'y find anything interesting in css files. What's the trouble?

How do I add a button to the bottom bar in extjs?

I try to add a text filed and a button to the grid panel in extjs with following code:
var shopIdInput = new Ext.form.TextField({
emptyText: "请输入商户Id",
width: 200
});
var deleteOneShopCacheBtn = new Ext.Button({
text : '删除商户缓存',
handler: deleteOneShopCache,
minWidth : 100,
cls: "delBtn"
});
......
var grid = new Ext.grid.GridPanel({
store: store,
columns: columns,
bbar: [shopIdInput, deleteOneShopCacheBtn],
buttons: [clearRedressWordCacheBtn, clearSplitWordCacheBtn, clearRegionCacheBtn, clearCategoryCacheBtn, runCommandBtn],
items: [commandForm],
buttonAlign: 'center',
stripeRows: true,
autoExpandColumn: 'serverUrl',
//title: '批量执行指令',
sm: checkboxSelect,
frame: true,
autoHeight: true,
enableColumnHide: false,
renderTo : 'serverInfoList'
});
But the button deleteOneShopCacheBtn in bbar doesn't look like a common button as button clearRedressWordCacheBtn in buttons. It changes to a button when the mouse is on it. I have tried to fix the problem by set the property cls and fail, so what can I do?
I usually just add an icon to the button which helps it stand out. so just set a value for
iconCls: 'mybuttonicon'
and in your css
.mybuttonicon { background-image: url(../path/to/icon) !important;}
the cls config allows you to specify additional classes to which to apply to your renderable object (in your case a button) but does NOT do anything with making it change based on the mouse hovering over it, etc.
What you need is a listener on deleteOneShopCacheBtn and listen to the mouseover event(also see Sencha docs for the list of events a button responds to). You can fire off a function and make your button look like whatever you want. I am currently at work. If you still have this question when I get home tonight I can post some code.
Also see following example:
Button click event Ext JS
}

Resources