How to make Alt + mouse Scroll to run awful.tag.viewnext and awful.tag.viewprev, having mouse position anywhere ?
I tried:
root.buttons(gears.table.join(
awful.button({ }, 3, function () mymainmenu:toggle() end),
awful.button({"Alt" }, 4, awful.tag.viewnext),
awful.button({"Alt" }, 5, awful.tag.viewprev)
))
But it dosent works.
root.buttons only works if your cursor is outside of any window. When over a client, you have to add the keybinding to the client. There is an extra section for that somewhere in the config (there are button bindings in there to focus the client when you click it). You have to add the button in both places.
Still cant use Alt. But it works with modkey. Here how i made it:
root.buttons(gears.table.join(
awful.button({ }, 3, function () mymainmenu:toggle() end),
awful.button({ modkey }, 5, awful.tag.viewnext),
awful.button({ modkey }, 4, awful.tag.viewprev)
))
...
clientbuttons = gears.table.join(
awful.button({ modkey }, 5, function(t) awful.tag.viewnext(1) end),
awful.button({ modkey }, 4, function(t) awful.tag.viewprev(1) end),
...
Related
In my highcharts, I already have a legend at the bottom left of the graph but want to add a custom status indicator for the entire graph. It's going to be a colored oval with a colored dot and a status on it like in the picture.
Should I be trying to use a custom legend or something else? I don't need to hide/show abiliity of the legend so maybe I'm thinking a label is more appropriate but it seems like those only go in the graph. I want something on the top right of the graph. I'm looking through the API to see what else is available but haven't found one that suites my needs.
edit-
seems like I might have to do "chart.renderer.text" but I'm not sure how to convert and make it work in typescript http://jsfiddle.net/phpdeveloperrahul/HW7Rm/
function (chart) {
var point = chart.series[0].data[8],
text = chart.renderer.text(
'Max',
point.plotX + chart.plotLeft + 10,
point.plotY + chart.plotTop - 10
).attr({
zIndex: 5
}).add(),
box = text.getBBox();
chart.renderer.rect(box.x - 5, box.y - 5, box.width + 10, box.height + 10, 5)
.attr({
fill: '#FFFFEF',
stroke: 'gray',
'stroke-width': 1,
zIndex: 4
})
.add();
});
The best way to add a custom element inside the legend is to use the legend.labelFormatter.
events: {
render() {
let chart = this,
legendAttr = chart.legend.box.getBBox(),
padding = 5;
chart.plus = chart.renderer.text('| +', chart.legend.box.parentGroup.alignAttr.translateX + legendAttr.width + padding, chart.spacingBox.height + padding / 2).attr({
cursor: 'pointer',
}).css({
fontSize: 20
}).on(
"click",
function() {
alert('plus was clicked')
}
).add()
}
}
API References:
https://api.highcharts.com/highcharts/legend.labelFormatter,
Demo: https://jsfiddle.net/BlackLabel/yu7qm9jx/1/
I decided to just get rid of the title and add custom css to the top of it.
Problem is probably simple but I can't find the proper answer.
I have a panel with only four buttons. Just vbox with buttons. And now I want to select and press this buttons not only with mouse click but also via keyboard. So I used Ext.KeyMap and I catch every key I want to: ENTER, TAB, DOWN and UP. But I can't find simple way to move focus betveen this buttons.
E.g. I'm focused on first button, press DOWN key and I want to be focused on the second button. No way. I tried
but1.down('button[action=next]').focus(false, 100))
but it can't work. Be so kind as to prompt please.
Well what can I say, just VERY BIG thank you – it is working obviously.
I had no idea to use KeyNav.
But it’s working in such a simple example My case is a little bit more complicated and I asked this question just simplified my situation. So this menu is the second screen in my application and it is constructed in such a way:
PANEL
Panel1
Label1
Button 1
Button 2
Button 3
Panel2
Label2
Button 4
Button 5
Panel3
Label3
Button 6
Button 7
Button 8
and every user can see (panels are hidden on the start) and use parts of this structure (e.g. Panel1, 3 and Button 8). I decide about it one step before (login step) and I show to the user menu only for him in the container defined:
Ext.define('Gromel.view.Menu', {
extend: 'Ext.container.Container',
requires:[
'Ext.tab.Panel',
'Ext.layout.container.Border',
'Ext.form.Label',
'Ext.form.Panel'
],
xtype: 'app-menu',
fullscreen: true,
layout: 'fit',
...
I place your code on the PANEL level and it's working almost properly. And I use the following default definition for above items:
defaults: {
margin: '0 0 10 0',
baseCls: 'x-btn-default-large',
cls: 'cap-btn',
style: 'font-size:18px;text-align: center',
height: 40,
width: '50%',
// yours:
handler: function () {
this.up('panel').activeButton = this.activeIndex;
}
}
so I modified your cls change method to:
button[method]('x-focus x-btn-focus x-btn-default-large-focus')
and your procedure is working.
Problems I can't manage now are:
as you see on the same level as buttons I have labels and I don't know how to bypass them;
more important - I want to run this procedure only on menu panel not in login panel and the rest (deeper in my structure) but this is global, so if I press ENTER on login panel I see the effect on next, menu panel; I replaced ENTER effect in the following way (I want to press ENTER on every button in menu and run different presses events):
case e.ENTER: butt.fireEvent('click', butt); break;
So if it isn’t to much for you be so kind and prompt me more please.
Try to use ExtJS KeyNav.
KeyNav provides a convenient wrapper for normalized keyboard navigation. KeyNav allows you to bind navigation keys to function calls that will get called when the keys are pressed, providing an easy way to implement custom navigation schemes for any UI component.
As you said
I have a panel with only four buttons.
I have work around that, I have created an small sencha fiddle demo. It will show you how is working. I hope this will help you to solve your problem.
You can also refer this Key Navigation Sample
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'Button Example with keyNav',
margin: 10,
bodyStyle: {
'border-width': '2px'
},
layout: {
type: 'vbox',
align: 'center'
},
defaults: {
xtype: 'button',
height: 50,
width: '70%',
margin: '20 0',
handler: function () {
this.up('panel').activeButton = this.activeIndex;
}
},
items: [{
text: 'My button 1',
activeIndex: 0
}, {
text: 'My button 2',
activeIndex: 1
}, {
text: 'My button 3',
activeIndex: 2
}, {
text: 'My button 4',
activeIndex: 3
}],
listeners: {
afterrender: function () {
var panel = this;
panel.keynav = Ext.create('Ext.util.KeyNav', {
target: Ext.getBody(),
scope: panel,
up: panel.doFocusOnButton,
down: panel.doFocusOnButton,
enter: panel.doFocusOnButton,
tab: panel.doFocusOnButton
});
//Remove cls on panel click
panel.el.on('click', function () {
this.doAddRemoveCls('removeCls');
}, panel)
panel.focus();
}
},
/*
* Common event will fire on key : ENTER, TAB, UP, DOWN
* #param {Ext.EventObject} e Just as Ext.Element wraps around a native DOM node
*/
doFocusOnButton: function (e) { //{ http://docs.sencha.com/extjs/4.2.5/#!/api/Ext.EventObject }
var panel = this,
button = '',
totalItem = panel.items.length - 1;
if (Ext.isDefined(panel.activeButton) == false) {
panel.activeButton = 0;
} else {
this.doAddRemoveCls('removeCls');
switch (e.getKey()) {
case e.ENTER:
case e.DOWN:
case e.TAB:
panel.activeButton++;
if (panel.activeButton > totalItem) {
panel.activeButton = 0;
}
break;
case e.UP:
panel.activeButton--;
if (panel.activeButton < 0) {
panel.activeButton = totalItem;
}
break;
}
}
this.doAddRemoveCls('addCls');
},
//This function will add or remove cls..
doAddRemoveCls: function (method) {
var panel = this,
index = panel.activeButton,
button = Ext.isDefined(index) ? panel.down('[activeIndex=' + index + ']') : null;
if (button) {
button[method]('x-focus x-btn-focus x-btn-default-small-focus')
}
}
});
I am trying to find the right css class to assign a new background colour to the group label of vis timeline. Here is my jsfiddle example.
I want to give the Label in front of the coloured area a background colour
var container = document.getElementById('visualization');
var timeline = new vis.Timeline(container);
var options = {
editable: true
};
var groups = new vis.DataSet([
{id: 0, content: 'First', value: 1, className: "default"},
{id: 1, content: 'Third', value: 3, className: "red"},
{id: 2, content: 'Second', value: 2, className: "blue"}
If you mean the red item ("Third"), then you can set the group label colour with something like:
.vis-labelset .vis-label.red {
background-color: red;
}
There are probably better ways to do this depending on the rest of your CSS structure - this is just consistent with the way you did your jsfiddle.
I'm trying to enable infinite scroll for an angular-meteor app I'm working on that draws objects from a meteor/mongo collection.
I've adapted step 12 of the angular-meteor tutorial to use pagination for the app I'm working on, and now I'd like to convert to infinite scrolling. I've been trying to adapt both the code from the tutorial and this example from ngInfiniteScroll for my purposes.
I imagine I'll need to use reactive variables, autorun, etc. similar to the tutorial, but I don't really know how to adapt it for infinite scroll. Considering the example below, how should I adjust my controller for it to use infinite scrolling, drawing from a database, with good angular-meteor practices for production?
Demo ngInfiniteScroll HTML:
<div infinite-scroll='loadMore()' infinite-scroll-distance='2'>
<img ng-repeat='image in images' ng-src='http://placehold.it/225x250&text={{image}}'>
</div>
Demo ngInfiniteScroll Function inside controller:
$scope.images = [1, 2, 3, 4, 5, 6, 7, 8];
$scope.loadMore = function() {
var last = $scope.images[$scope.images.length - 1];
for(var i = 1; i <= 8; i++) {
$scope.images.push(last + i);
}
};
My angular-meteor pagination code inside controller:
$scope.page = 1;
$scope.perPage = 1;
$scope.sort = {'_id': -1};
$scope.orderProperty = '1';
$scope.images = $meteor.collection(function() {
return Images.find({}, {
sort : $scope.getReactively('sort')
});
});
$meteor.autorun($scope, function() {
$meteor.subscribe('images', {
limit: parseInt($scope.getReactively('perPage')),
skip: (parseInt($scope.getReactively('page')) - 1) * parseInt($scope.getReactively('perPage')),
sort: $scope.getReactively('sort')
}).then(function(){
$scope.imagesCount = $meteor.object(Counts ,'numberOfImages', false);
});
});
$scope.pageChanged = function(newPage) {
$scope.page = newPage;
};
Please look at this basic example https://github.com/barbatus/ng-infinite-scroll.
Controller there re-subscribes every time onLoadMore is executed.
There is also a deployed demo http://ng-infinite-scroll.meteor.com.
Make sure this time angular.module('infinite-scroll').value('THROTTLE_MILLISECONDS', 500) is set properly (not very small) to avoid very frequent requests.
Pretty sure I have some fundamental mis-understanding of how/when fa-animate-enter is invoked. The following code works if you click on the box, it scales, but I was expecting that when the fa-view becomes active, it would also call the fa-animate-enter rather than necessitating a click. When a view becomes active, how do I call animateScale_enter()?
http://plnkr.co/edit/r2OSonPSvAQREAHvns7F
<fa-view fa-animate-enter="animateScale_enter()"
fa-animate-leave="animateScale_leave()"
fa-animate-halt="animateScale_halt()" >
<fa-modifier fa-origin="[0.5, 0.5]"
fa-align="[0.5, 0.5]"
fa-scale="scale.get()"
>
<fa-surface fa-background-color="'#dc322f'"
fa-size="[100, 100]"
fa-click="animateScale_enter()"
>{{text}}
</fa-surface>
</fa-modifier>
</fa-view>
.js
<script>
var app=angular.module('MyApp', ['famous.angular'])
.controller('MainController',
function($scope, $famous) {
var Transitionable = $famous['famous/transitions/Transitionable'];
var SpringTransition = $famous['famous/transitions/SpringTransition'];
Transitionable.registerMethod('spring', SpringTransition);
$scope.viewType="view2";
$scope.text="Scale=[1,1,1], click";
$scope.scale = new Transitionable([1, 1, 1]);
$scope.animateScale_enter = function() {
console.log("enter");
$scope.text="Scale=[2,2,1], enter";
$scope.scale.set([2, 2, 1], {
method: 'spring',
period: 750,
dampingRatio: 0.3
});
};
$scope.animateScale_leave = function() {
console.log("leave");
};
$scope.animateScale_halt = function() {
console.log("halt");
scope.transform.halt()
};
}
);
</script>
Apparently it is connected to ng-repeat, and from what I gather, anything that forces a dom update... ??
So just adding a dummy ng-repeat to the fa-view seems to make it work.
<fa-view ng-repeat="x in {x:1}"
fa-animate-enter="animateScale_enter()"
fa-animate-leave="animateScale_leave()"
fa-animate-halt="animateScale_halt()" >
I hope someone can give me a better way to do this. I just feel dirty doing it this way.