I am trying to customize show apps icon..
tried to edit the java script
var ShowAppsIcon = new Lang.Class({
Name: 'ShowAppsIcon',
Extends: DashItemContainer,
_init() {
this.parent();
this.toggleButton = new St.Button({ style_class: 'show-apps',
track_hover: true,
can_focus: true,
toggle_mode: true });
this._iconActor = null;
this.icon = new IconGrid.BaseIcon(_("Show Applications"),
{ setSizeManually: true,
showLabel: false,
createIcon: this._createIcon.bind(this) });
this.toggleButton.add_actor(this.icon.actor);
this.toggleButton._delegate = this;
this.setChild(this.toggleButton);
this.setDragApp(null);
},
_createIcon(size) {
this._iconActor = new St.Icon({ icon_name: 'view-app-grid-symbolic',
icon_size: size,
style_class: 'show-apps-icon',
track_hover: true });
return this._iconActor;
},
this script is working as a single script for the favorite apps icons and show apps icon.
I am Using Ubuntu 18.04.
I am trying to customize the "show-apps" Icon.
Here is the Java Script file. https://superuser.com/questions/1431374/ubuntu-18-04-customize-show-apps-icon
Please have a look on below imgaes with Show-Apps button at bottom right with yellow and green color.
Question: Is it possible to alter the attached Java Script file, so that I can customize the Width of the Show-Apps Icon size keeping Show-Apps Icon Height Unchanged from the script so that when I increase the Dock Icon Size from System Settings..I will have constant height but variable width only for show apps Icon based on entire dock height.
Related
I am trying to implement embed a tweet with Javascript programmatically.
Below is my code
'''
twttr.widgets
.createTweet(id, tweet, {
conversation: 'none', // or all
cards: 'visible', // or hidden
linkColor: '#cc0000', // default is blue
theme: 'light', // or dark
})
.then(function (el) {
el.querySelector('#twitter-widget-0').style.width = '100%';
});
'''
I have taken reference from below URL
https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/guides/embedded-tweet-javascript-factory-function
As twitter has mentioned that width parameter should be between 250 and 550 pixels.
Is there any way to set width as 100% or Full-Width of web page.
I can't override CSS as all the css has been under iframe.
Any solution ?
Looking at the playground example, I can create and apply delta decorations just fine:
var editor = monaco.editor.create(document.getElementById("container"), {
value: "var a = true",
language: "javascript"
});
var decorations = editor.deltaDecorations([], [
{ range: new monaco.Range(3,1,5,1), options: { isWholeLine: true, linesDecorationsClassName: 'myLineDecoration' }},
{ range: new monaco.Range(7,1,7,24), options: { inlineClassName: 'myInlineDecoration' }},
]);
However, the :hover variants of the css aren't respected at all for the decoration className at all.
The :hover variant for inlineClassName is respected, but only for the specific block I hover over, not the entire decoration:
I know Monaco's dom manipulation is very complex (and it's amazing it works in the browser so well!) so this may be expected.
Is there some way to affect the :hover background color of a Monaco editor delta decoration?
I have built a kiosk app for Chrome with app builder, but even if the key of doing a kiosk app is that it will be displayed at full screen, I don´t manage to get rid of the top bar (I have removed the homepage button etc. but can´t display it at total full screen). I`d like to know if there´s any commando for this in html or javascript and in which file it should be added.
In the backgroung.js file I´ve added the line "state: 'fullscreen' but it does not work (I've also added the permission for fullscreen in the manifest file):
var runApp = function() {
if (chrome.power) {
chrome.power.requestKeepAwake('display');
}
console.log(config);
chrome.app.window.create(
config ?
'exported_app_view.html' :
'designer_view.html',
{
id: 'KioskDesignerWindow',
width: 1100,
height: 720,
minWidth: 800,
minHeight: 600,
state: 'fullscreen'
},
function(win) {
if (!this.X) { return; }
var window = win.contentWindow;
window.onload = function() {
this.$addWindow(window);
var Y = this.X.subWindow(window, 'Kiosk Designer Window');
this.DOM.init(Y);
}.bind(this);
win.onClosed.addListener(function() {
this.$removeWindow(window);
}.bind(this));
}.bind(this));
}.bind(this);
Yes, you can do it with JavaScript. In background.js, your 3rd parameter to chrome.app.window.create is that callback function that has the win argument - add this line:
win.fullscreen();
https://developer.chrome.com/apps/app_window#type-AppWindow
If you hit escape while your app is running you may get the title bar back, but next time it runs it will go fullscreen again.
I have a problem.
I have a list of tweets to show in a page. For mobile devices I don't want to show the right vertical scrollbar.
I've build the page, with its slider and its tweets list. Then I put this page in a scroll container.
Then I return the scroll container.
The code is this:
sap.ui.jsview("ttest.initView", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* #memberOf ttest.initView
*/
getControllerName : function() {
return "ttest.initView";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* #memberOf ttest.initView
*/
createContent : function(oController) {
var oTweetList = new sap.m.List("items", {
threshold: 2,
inset : false,
showUnread : true,
scrollToLoad : true,
columns : [
new sap.m.Column({
styleClass : "data",
hAlign : "Left",
})
]
});
var oSlider = new sap.m.Slider({
id: "tweetSlider",
width: '100%',
min: 0,
change : function(oEvent){
//Update tweet list
var startIndex = 0;
var endIndex = this.getValue();
oController.updateTweetList("update", startIndex, endIndex);
}
});
var oPage = new sap.m.Page({
title: "Tweet list for #matteorenzi",
enableScrolling : false,
headerContent: [
new sap.m.Button({
icon: "sap-icon://refresh",
press : function(oEvent){
//Update tweet list with all tweets
oController.updateTweetList("first", "", "");
}
})
],
content: [
oSlider,
oTweetList
]
});
var oScroller = new sap.m.ScrollContainer({
vertical : true,
horizontal : false,
content : [
oPage
]
});
oEventBus.subscribe("it.besolution.PopulateList", "Go", function(chId, evId, data){
var template = new sap.m.ColumnListItem({
type : "Navigation",
cells : [
new it.besolution.Tweet({
user : "{user/name}",
username : "{user/screen_name}",
tweet : "{text}",
press : function(oEvent){
var path = this.getBindingContext().getPath();
sap.ui.getCore().byId("iduserDetails").setModel(oGlobalModel).bindElement(path);
app.to("iduserDetails");
}
})
]
});
oSlider.setMax(oGlobalModel.getProperty("/size") - 1);
oTweetList.setModel(oGlobalModel);
oTweetList.bindAggregation("items", "/tweets/", template);
});
return oScroller;
}
});
The page didn't load. I don't know how to do. Why the list is invisible?
Obviously, if I remove the scroll container and I return the oPage element, the list is visible.
Why? How I have to write my code to show the list without the scrollbar?
If you don't want to show the right vertical scrollbar. There is a property called enableScrolling.And you really want to use ScrollContainer, put it as Page content, not the other way around.
enableScrolling default: true
Whether the Page takes special measures to make page content scrollable and keep headers fixed. If set to false, there will be no scrolling at all; for performance reasons this is highly recommended when scrolling is not needed. The Page only allows vertical scrolling because horizontal scrolling is discouraged in general for full-page content. If it still needs to be achieved, disable the Page scrolling and use a ScrollContainer as full-page content of the Page. This allows you to freely configure scrolling. It can also be used to create horizontally-scrolling sub-areas of (vertically-scrolling) Pages.
I have this plugin that I want to be enabled in WYSIWYG and Source modes. Here is the simple code:
(function()
{
CKEDITOR.plugins.add('oovideo',
{
init : function(editor)
{
editor.addCommand('oovideo', new CKEDITOR.dialogCommand('oovideo'));
editor.ui.addButton('OOVideo',
{
label: 'OOVideo',
command: 'oovideo',
icon: 'http://www.google.com/favicon.ico',
modes : { source : 1, wysiwyg : 1, enhancedsource : 1 }
});
CKEDITOR.dialog.addIframe(
'oovideo',
'OOVideo',
'http://www.example.com/', 450, 500,
null, null
);
}
});
})();
Currently the button will only pull up the iFrame dialog when in WYSIWYG mode.
Because I added modes : { source : 1, wysiwyg : 1, enhancedsource : 1 } in the button control, the button is not grayed out in all modes, but the button will only function in WYSIWYG mode.
I found some hints in this post:
CKEditor plugin button disabled in source mode
It seems that I have to include the modes variable in the editor.addCommand() call, but I am passing a CKEDITOR.dialogCommand object in that parameter space and not JS code.
What is the best way to pass the dialog object and the mode parameter? Thanks for any assistance!
I found the solution - the editor.addCommmand can be assigned to a variable, and then have the modes property added on a new line.
var command = editor.addCommand('tgroovideo', new CKEDITOR.dialogCommand('tgroovideo'));
command.modes = { wysiwyg:1, enhancedsource:1 };