i want to override Backrdrop.js file in my componenet
File path : react\node_modules\#material-ui\core\Backdrop\Backdrop.js
default style :
var styles = {
root: {
zIndex: -1,
position: 'fixed',
right: 0,
bottom: 0,
top: 0,
nd I want to set top value 0 to 58 or other value. How to do override in component.
Related
I am trying to open a project folder image in the canvas without uploading it in a file input. But it is not showing there and I am using react-konva to add the image.
Here is the code where I am trying to upload the image:
const img = new window.Image();
img.src = require('../../../assets/images/71.png');
img.onload = function () {
const img_width = this.width;
console.log('the image', require('../../../assets/images/71.png'));
const img_height = this.height;
const max = img_width > img_height ? 100 : 100;
const ratio = (img_width > img_height ? (img_width / max) : (img_height / max))
setOriginalDim({ width: img_width, height: img_height });
setDimensions({ width: img_width/ratio, height: img_height/ratio });
const theImg = new Konva.Image({
image: this,
x: 0,
y: 0,
width: img_width/ratio,
height: img_height/ratio,
name: 'background_image',
draggable: true
});
if (layerRef.current != null) {
console.log('image', theImg);
layerRef.current.add(theImg);
layerRef.current.draw();
}
};
And my react component is this:
<Stage
width={dimensions.width}
height={dimensions.height}
onMouseDown={handleStageMouseDown}
style={{ backgroundColor: '#fff', boxShadow: '0 0 6px 0 #666' }}
ref={stageRef}
id="certificate_canvas"
>
<Layer
ref={layerRef}
/>
</Stage>
The onload part is not executing also the image is not loading into the canvas. How do I add the project folder image without uploading it
instead of this
img.src = require('../../../assets/images/71.png');
use
img.src = '../../../assets/images/71.png';
you dont need the require function
I'm using some custom attributes while I'm creating my objects. For example in this case "name" and "icon":
$scope.addRoundRect = function () {
var coord = getRandomLeftTop();
var roundrect = (new fabric.Rect({
left: coord.left,
top: coord.top,
fill: '#' + getRandomColor(),
width: 250,
height: 250,
opacity: 1,
scaleX: 1,
scaleY: 1,
angle: 0,
rx: 10,
ry: 10,
strokeWidth: 0,
name: "Rounded Rectangle",
icon: "crop-square"
}));
canvas.add(roundrect).setActiveObject(roundrect);
};
This is my copy/paste function. As you can see I have already tried to paste the relevant attributes – bu I think that they are simply not cloned with the object:
function copy() {
canvas.getActiveObject().clone(function (cloned) {
_clipboard = cloned;
});
}
function paste() {
_clipboard.clone(function (clonedObj) {
canvas.discardActiveObject();
clonedObj.set({
left: clonedObj.left + 10,
top: clonedObj.top + 10,
evented: true,
name: clonedObj.name,
icon: clonedObj.icon,
});
if (clonedObj.type === 'activeSelection') {
clonedObj.canvas = canvas;
clonedObj.forEachObject(function (obj) {
canvas.add(obj);
});
clonedObj.setCoords();
} else {
canvas.add(clonedObj);
}
canvas.setActiveObject(clonedObj);
canvas.requestRenderAll();
});
To make it short: is there a way to clone and paste also this attributes without having to modify the source (ie. impleneting a full fledged custom attribute in the JSO serialization)?
var canvas = new fabric.Canvas('c');
var roundrect = new fabric.Rect({
left: 50,
top: 30,
fill: 'blue',
width: 250,
height: 250,
opacity: 1,
scaleX: 1,
scaleY: 1,
angle: 0,
rx: 10,
ry: 10,
strokeWidth: 0,
name: "Rounded Rectangle",
icon: "crop-square"
});
canvas.add(roundrect).setActiveObject(roundrect);
var customProperties = 'name icon'.split(' ');
function copy() {
canvas.getActiveObject().clone(function(cloned) {
console.log(cloned);
_clipboard = cloned;
}, customProperties);
}
function paste() {
// clone again, so you can do multiple copies.
_clipboard.clone(function(clonedObj) {
canvas.discardActiveObject();
clonedObj.set({
left: clonedObj.left + 10,
top: clonedObj.top + 10,
evented: true,
});
if (clonedObj.type === 'activeSelection') {
// active selection needs a reference to the canvas.
clonedObj.canvas = canvas;
clonedObj.forEachObject(function (obj) {
canvas.add(obj);
});
// this should solve the unselectability
clonedObj.setCoords();
} else {
canvas.add(clonedObj);
}
canvas.setActiveObject(clonedObj);
canvas.requestRenderAll();
console.log(clonedObj);
_clipboard = clonedObj;
},customProperties);
}
canvas {
border: blue dotted 2px;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<button onclick='copy()'>copy</button>
<button onclick='paste()'>paste</button><br>
<canvas id="c" width="400" height="400"></canvas>
object.clone accepts callback function and any additional property you want to include as another parameter. You can send your name and icon as properties to include.
And in paste you no need to clone that object if you are doing so, make sure there also send you are including your additional properties.
I'm trying to make the effect when a button is clicked, the button fades out and in the same place a load animation fades in, but I can't manage to make the load animation show after the button is totally hidden.
In the HTML I have:
<div class="form-group">
<button ng-hide="login.sendingAjax" type="submit" id="loginButton" class="form-control btn btn-primary uppercase">INGRESAR</button>
<loader ng-if="login.sendingAjax" ng-show="login.sendingAjax" class="loaderContainer"></loader>
</div>
Then in my controller I have the function when the form is being submited, in that moment I put the login.sendingAjax variable to true for the button to be hidden and the animation to appear, and when it ends the call with a failure I put the login.sendingAjax variable back to false:
vm.loginError = false;
vm.sendingAjax = false;
/**
* Submit the form and check if login was ok
*/
vm.loginUser = function() {
vm.loginError = false;
vm.sendingAjax = true;
vm.alert = {};
authService.login(vm.formData).then(function () {
$location.path('/ubicaciones');
},
function () {
vm.alert = {type: 'danger', msg: 'Hola'};
vm.sendingAjax = false;
vm.loginError = true;
});
};
The CSS is:
.ng-hide-add { animation:0.5s hideObjectOpacity ease; }
/* when showing the picture */
.ng-hide-remove { animation:0.5s flipInX ease; }
/* ANIMATIONS (FROM ANIMATE.CSS) ======================== */
/* flip in */
#keyframes flipInX {
0% {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transition-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
100% {
transform: perspective(400px);
transform: perspective(400px);
transform: perspective(400px);
}
}
/* light speed out */
#keyframes hideObjectOpacity {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
there are two ways to handle that. one is that while NOT using ng-hide and ng-show, you can do the fade out animation with a function inside your JS (using a module like VelocityJS or ...), and inside it's callback, fade in the other element (the element should be display:none by default, and the animations should change the display property in their progress).
or you have to use different toggles for the ng-hide and ng-show, and set the ng-show toggle to true in the first function's callback or using $timeout ...
you can also fake the delay in entrance by manipulating the first few steps of the css animation and say set the opacity to 0 in them, until the first element is completely out... but i don't think it's a proper way of doing it . (considering your layout might change because an element with opacity:0 still exists in there!)
tell me if you need an example to understand it better
Is there any way I can create the below image using textfield border in Titanium appcelerator ? I dont want to use the image . Please help .
How about views? Change shape's position and width as necessary. Efficient? /shrug
var win = Ti.UI.createWindow({
backgroundColor: 'white'
});
// no background color
var shape = Ti.UI.createView({
height: '300dp',
width: '200dp'
});
var color = "blue";
var bottom = Ti.UI.createView({
height: '1',
left: 0,
right: 0,
bottom: 0,
backgroundColor: color
});
var left = Ti.UI.createView({
width: '1',
height: '10',
left: 0,
bottom: 0,
backgroundColor: color
});
var right = Ti.UI.createView({
width: '1',
height: '10',
right: 0,
bottom: 0,
backgroundColor: color
});
shape.add(bottom);
shape.add(left);
shape.add(right);
win.add(shape);
win.open();
This image is showing the line which would appear under android textfield in holo theme. You might wanna have a look at this question How to use Holo.Light theme, and fall back to 'Light' on pre-honeycomb devices?
i m using this CSS to setting my tab's height
.MainPanel .x-tab-bar-strip {
top: 40px !important; /* Default value is 20, we add 20 = 40 */
}
.MainPanel .x-tab-bar .x-tab-bar-body {
height: 43px !important; /* Default value is 23, we add 20 = 43 */
border: 0 !important; /* Overides the border that appears on resizing the grid */
}
.MainPanel .x-tab-bar .x-tab-bar-body .x-box-inner {
height: 41px !important; /* Default value is 21, we add 20 = 41 */
}
.MainPanel .x-tab-bar .x-tab-bar-body .x-box-inner .x-tab {
height: 41px !important; /* Default value is 21, we add 20 = 41 */
}
.MainPanel .x-tab-bar .x-tab-bar-body .x-box-inner .x-tab button {
height: 33px !important; /* Default value 13, we add 20 = 33 */
line-height: 33px !important; /* Default value 13, we add 20 = 33 */
}
The problem is the Icon do not show properly.
Question
I want to change the tabs icon size to 32x32 and align middle.
Try redefining this class :
*.MainPanel .x-tab-icon-el img{
width: 100%; /* did this to center the icons */
height: 100%; /* did this to center the icons */
display: block; /* did this to center the icons */
margin-left: auto; /* did this to center the icons */
margin-right: auto; /* did this to center the icons */
}*
and if needed the rest of the tab content
*.MainPanel .x-tab-inner .x-tab-inner-center{
}*