This should probably be pretty straighforward but I haven't been able to figure it out. I'm just trying to show a loadmask on a component without the spinner image. Everything else I want to look exactly the same.
I've set up a jsfiddle with a regular loadmask applied. Again, just trying to figure out how to exclude the spinner image.
Ext.onReady(function () {
Ext.create('Ext.window.Window', {
height: 500,
width: 500,
autoShow: true,
title: 'Loadmask example',
html: 'adsfa',
listeners: {
boxready: function (win) {
var lm = new Ext.LoadMask(win, {
msg: 'loadmask msg'
});
lm.show();
}
}
});
});
jsfiddle
Add a custom css class to the LoadMask object. You need to override background of this class.
.custom-mask .x-mask-msg-text {
background: transparent !important;
padding: 5px !important
}
Demo
Related
I'm building a drawing application (Like paint or Sketchpad) and I need to resize my cursor depending on of the line width of the pencil. The problem is, apparently, you can't resize your cursor. The solution that I found is to use a custom cursor (the normal cursor is changed for an image) and to resize the image. The thing is, I don't know if I need a function to do that or I can directly change the size of the image via SCSS (CSS).
Here's what I've done so far:
private setCursor(cursorType: DrawingCursor): void {
this.Canvas.setAttribute("style", "cursor:url(" + cursorType + "), auto;");}
The cursorType is the url of the custom cursor.
I'm doing this from an angular 8 project (in Typescript).
Thank you !
You can use NgClass binding to implement it. This way the Angular binding takes care of applying the CSS classes so you don't need to set styles manually.
To implement this solution first define the CSS classes for the canvas and the different cursor sizes. For example:
.myCanvas {
width: 400px;
height: 400px;
background-color: green;
}
.brush18px {
cursor: url('brush18px.png'), auto;
}
.brush24px {
cursor: url('brush24px.png'), auto;
}
.brush36px {
cursor: url('brush36px.png'), auto;
}
Then in the component you define a property that will provide the classes for the canvas and a property for the size of the brush. For example:
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
#Input() cursorSize = '18';
get canvasClasses() {
return {
myCanvas: true,
brush18px: this.cursorSize === '18',
brush24px: this.cursorSize === '24',
brush36px: this.cursorSize === '36',
};
};
}
The canvasClasses property must return an object that specifies for each CSS class name if it is applied or not by setting the value to true or false. I use a getter property here so the values update automatically when the size changes.
Now you can bind this in the template and the cursor will automatically update based on the cursorSize value.
Here is how the template looks like:
<canvas [ngClass]="canvasClasses"></canvas>
<br/>
<select [(ngModel)]="cursorSize">
<option>18</option>
<option>24</option>
<option>36</option>
</select>
I have created also a working StackBlitz sample so you can see it in action.
Another possible solution based on the comment on the first answer. This is more of a workaround solution where you hide the actual cursor and move around an image instead so it looks like it is the cursor. This was inspired by the second answer on this post about resizing a cursor image.
I implemented this solution in Angular using a directive that you add to the canvas element in the template. The directive takes as the main parameter the image to show as the cursor and has an additional parameter for the size for the image. I recommend an SVG image that resizes well. Still it is possible to use also a standard image.
Here is the implementation of the Directive for an SVG image:
#Directive({
selector: '[svgCursor]'
})
export class SvgCursorDirective {
private cursorSizeValue: number = 16;
#Input('svgCursor') public svgImage: SVGSVGElement;
#Input() public set cursorSize(cursorSize: number) {
this.cursorSizeValue = cursorSize;
this.updateCursorSize();
}
constructor(el: ElementRef) {
el.nativeElement.style.cursor = 'none'; // hides the browser cursor
}
#HostListener('mouseenter') onMouseEnter() {
// makes image visible only when mous enters the element
this.svgImage.style.visibility = 'visible';
}
#HostListener('mousemove', ['$event']) onMouseMove(e: MouseEvent) {
// draws the image at the mouse position
this.svgImage.style.left = e.clientX.toString();
this.svgImage.style.top = (e.clientY - this.cursorSizeValue).toString();
}
#HostListener('mouseleave') onMouseLeave() {
// hides image when the mouse leaves the element
this.svgImage.style.visibility = 'hidden';
}
private updateCursorSize() {
if (this.svgImage != null) {
this.svgImage.style.width = this.cursorSizeValue.toString();
this.svgImage.style.height = this.cursorSizeValue.toString();
}
}
}
Once you have the directive you can use it in the following way inside a component template:
<svg #cursorImage class="cursor" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 14c-1.66 0-3 1.34-3 3 0 1.31-1.16 2-2 2 .92 1.22 2.49 2 4 2 2.21 0 4-1.79 4-4 0-1.66-1.34-3-3-3zm13.71-9.37l-1.34-1.34c-.39-.39-1.02-.39-1.41 0L9 12.25 11.75 15l8.96-8.96c.39-.39.39-1.02 0-1.41z"/></svg>
<canvas class="myCanvas" [svgCursor]="cursorImage" [cursorSize]="cursorSize"></canvas>
As you can see you need to add a template reference variable to the image so you can pass it as a parameter to the svgCursor directive.
Also important for this to work you need to set the correct CSS styles to the image to disable things that are not needed. It is also set to invisble so it becomes visible only when the mouse enters te canvas.
This are the styles I used:
.myCanvas {
width: 400px;
height: 400px;
background-color: lightgreen;
}
.cursor {
position: absolute;
cursor: none;
pointer-events: none;
visibility: hidden;
}
I have created also a working StackBlitz sample so you can see how this works.
I want to make a handsontable starting from 1 single cell. Then we can add/remove rows/columns by the contexte menu, or even copy-paste data from an Excel file. I fixe the maximum size to be 104 x 66. So if there are many data, the handsontable will have scrolling.
Now, I want to add borders around the table, for all the cases: 1) when the table does not reach its maximum size, the borders should be JUST around the cells; 2) when the table reaches its maximum size, the borders should be around the maximum size. I have made this JSBin, which satisfies the second case, but NOT the first one:
<!DOCTYPE html>
<html>
<head>
<script src="https://docs.handsontable.com/pro/1.9.1/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/1.9.1/bower_components/handsontable-pro/dist/handsontable.full.min.css">
<style>
.handsontable { border: 1px solid red; }
</style>
</head>
<body>
<div id="example4" class="hot head-gap handsontable htRowHeaders htColumnHeaders"></div>
</body>
</html>
JavaScript:
document.addEventListener("DOMContentLoaded", function() {
function getData() {
return [
[""]
];
}
var
example4 = document.getElementById('example4'),
hot4;
hot4 = new Handsontable(example4, {
data: getData(),
width: 104,
height: 66,
colWidths: 47,
rowHeights: 23,
rowHeaders: false,
colHeaders: false,
contextMenu: true,
contextMenuCopyPaste: {
swfPath: '/bower_components/zeroclipboard/dist/ZeroClipboard.swf'
}
});
});
Does anyone have a solution?
Edit 1: Following the answer of Serg Chernata:
Edit 2: Following the answer of fap, I see two problems:
1) the red borders are even around the context menu:
2) the red borders are outside the blue borders of the data:
I have kinda added some thing and posted in JSBin. I have added css and included jquery to your original html for dom related queries. Do let me know whether it helps. Here is the JS code.
document.addEventListener("DOMContentLoaded", function() {
function getData() {
return [
[""]
];
}
var
example4 = document.getElementById('example4'),
hot4;
hot4 = new Handsontable(example4, {
data: getData(),
width: 104,
height: 66,
colWidths: 47,
rowHeights: 23,
rowHeaders: false,
colHeaders: false,
contextMenu: true,
contextMenuCopyPaste: {
swfPath: '/bower_components/zeroclipboard/dist/ZeroClipboard.swf'
},
afterRender: function() {
var item = $('.ht_master.handsontable .wtHolder')[0];
if (item.scrollHeight > item.clientHeight || item.scrollWidth > item.clientWidth) {
$('.handsontable').css('border', '1px solid red');
$(item).find('.htCore').css('border', '0px none white');
} else {
$(item).find('.htCore').css('border', '1px solid red');
}
}
});
});
Assuming I understood your requirements correctly, we can probably do this with a little bit of css:
#example4{
max-width: 104px;
max-height: 66px;
display: inline-block;
}
Note, I removed the width and height from your dandsontable config. This way we can scale with content up to a certain defined max-width and max-height.
http://jsbin.com/qehexiyidu/edit?html,css,js,output
I have a solution that, I believe, cover all your requirments by using the after create/remove col/row events, but it's not perfect.
What I did is changing dynamically the Width and Height of the table after one of the events, e.g :
hot4.addHook('afterCreateCol', function() {
setTable();
});
If one of or both value are above the limit, they will stay at this limit. (104 x 66 in your example)
So the main function would be :
function setTable() {
if(hot4.getColWidth()*hot4.countCols()<208)
hot4.updateSettings({
width: hot4.getColWidth()*hot4.countCols()
});
else
hot4.updateSettings({
width: 208
});
if(hot4.getRowHeight()*hot4.countRows()<132)
hot4.updateSettings({
height: hot4.getRowHeight()*hot4.countRows()
});
else
hot4.updateSettings({
height: 132
});
}
(I used 208 x 132 for my eyes..)
Note that I load the data after the creation of the table to trigger the event afterLoadData.
The only remaining "issue" (I said it wasn't perfect..) would be the scrollbars. I don't know why, but even if the data fits, the scrollbar are present under the limit. It's supposed to be fixed, but apparently not... (I'm very interested if you manage to fix this)
Anyway, I think that starting from this solution, you may succeed to reach exactly what you want so I decided to share it with you in it's current state. You can find a working example in this JSBin.
Edit 1 : Screenshot of the "Scrollbars issue"
Even if the 2x2 cells fit in the table, the scrollbars are present.
I want to customize the classes in Google Charts.
As far as I'm concerned, there are two options that I've stumbled upon. The first option is:
Just inspect the elements in the browser, to see what the name of the classes is, then just give them new rules in the css file. In some cases I've to set !important; to override the rule. This option seems very "ugly", because forcing the class to have an !important; state is just ugly.
.charts-menu-button,
.charts-menu-button-inner-box {
width: 200px;
line-height: 55px;
border: 0 !important;
padding: 0 !important;
}
This is my second option which I'm pretty confused over. As I read the Google Chart docs, they suggest to call the "cssClass", like this:
options: {
ui: {
cssClass: {}
}
}
What I don't understand is when I'm going with the second option, absolute nothing happens to the class I want to customize.
So my question is: What am I doing wrong here, and is there any other way?
Set the cssclassnames in options for the chart as below. Define the classes in the css file. Below example is for table chart.
chart1.options = {
// title: "User Chart",
displayExactValues: true,
'showRowNumber': false,
'allowHtml': true,
is3D: true,
// 'height' : '350px',
cssClassNames : {
headerRow :'tableChartHeaderRow',
hoverTableRow : 'tableChartHeaderRowHighlightedState'
}
};
I have set custom icon to tabs, but it takes the blue color of tab panel, how can i get the original color of the icons.
var tabPanel = Ext.create('Ext.TabPanel',{
tabBarPosition: 'bottom',
items:[
{
title:'General',
iconCls:'icongen',
}
my css code
.icongen
{
-webkit-mask-box-image: url("resources/images/general.png");
}
.icongen
{
background-image: url("resources/images/general.png");
}
use this :) this will solve your problem
This is how I would do, add the following to your css:
.x-tab .x-button-icon.icongen, .x-button .x-button-icon.x-icon-mask.icongen {
-webkit-mask-image: url(<PATH TO IMAGE>);
}
along with iconCls you might also have to use iconMask: true
After extensive searching on this topic, I haven't been able to find an answer, so hopefully someone can help me with this issue. I have a relatively basic dialog box:
$("#dialog-search").dialog({
resizable: false,
height:dimensionData.height,
width: dimensionData.width,
modal: true,
title: dimensionData.title,
position: [x,y],
open: function() {
$("#dialog-search .dateField").blur();
},
close: function(event, ui){
callBack(event,ui);
}
});
What I want to do is replace the X icon (ui-icon-close) with a different icon provided by the ui (ui-icon-minus), so that clicking the minus icon closes the dialog instead. I've seen posts on how to hide the icon or replace it with a custom image in css, but I haven't yet found a way to replace the icon with another icon to perform the same functionality.
Edit: I also want to be able to use ui-icon-close for a different functionality in my dialog box by adding a custom behavior/location, but that may be outside the scope for this question. Feel free to address this if it's a related solution, though.
Try to see the structure of the dialog and it should not be hard to do it.
http://jqueryui.com/demos/dialog/#theming
Use the create event to change the class of the close button icon to class of another icon will do.
http://jsfiddle.net/Quincy/kHU2M/1/
$("#dialog-search").dialog({
create: function(event, ui) {
var widget = $(this).dialog("widget");
$(".ui-dialog-titlebar-close span", widget)
.removeClass("ui-icon-closethick")
.addClass("ui-icon-minusthick");
}
});
Old question, but maybe I'll help someone. Following CSS made the trick for me, totally custom Close button UI. Not very elegant :), but works fine for me.
.ui-icon-closethick {
background-image: url(images/my-10px-image.png) !important;
background-position: left top !important;
margin: 0 !important;
}
.ui-dialog .ui-dialog-titlebar-close, .ui-icon-closethick {
width: 10px !important;
height: 10px !important;
}
.ui-dialog .ui-dialog-titlebar-close {
background: none !important;
border: none !important;
}
.ui-dialog .ui-dialog-titlebar-close, .ui-dialog .ui-dialog-titlebar-close:hover {
padding: 0 !important;
}
My custom close button shown below: