I'm fairly new to react and css and I'm a bit stuck.
I have an animated NavBar that opens on a button click and fills the page - however, because of the way my app is structured I'm struggling to hide the component underneath the nav - i.e. home page, as elements with properties like position: absolute aren't being hidden underneath it.
Right now, my css classes for this are:
.nav-links.open {
clip-path: circle(1400px at 95% -10%);
-webkit-clip-path: circle(1400px at 95% -10%);
opacity: 1;
}
.nav-links.close {
clip-path: circle(100px at 95% -10%);
-webkit-clip-path: circle(100px at 95% -10%);
opacity: 0.7;
}
And I simply toggle the classes with this:
toggleNavbar() {
if (this.state.navBarActive === false) {
this.setState({
navBackStyle: 'white',
navClass: 'nav-links open',
navBarActive: !this.state.navBarActive,
});
} else {
this.setState({
navBackStyle: '#5b78c7',
navClass: 'nav-links close',
navBarActive: !this.state.navBarActive,
});
}
}
My react components are all in the app.js, with a components folder containing the navbar, home etc.
My css files are also structured as components and imported with scss. I understand I could have everything in one file to make it easier to hide other elements but that won't be very easy to work with, as this is big project.
Related
Working on an Angular 14 application, I want all context menu pop-ups to be only 80% of their size, as the default size is too large and clunky in the context of the data presented in the application. This is working fine to accomplish this:
.cdk-overlay-pane .mat-menu-panel {
transform: scale(0.8);
transform-origin: top left;
}
However, the problem is that the context menu appears at full size for a moment, and then the transform takes effect and it "snaps" to the desired size. I don't want it to appear until the transform is complete. Anybody know how to accomplish this?
I was able to do this by defaulting mat-menu-panel to visibility: hidden, then showing it a fraction of a second after the menu is opened. (I don't like using javascript like this within the context of an Angular app, but I don't know any other way.)
Default CSS:
.mat-menu-panel {
visibility:hidden;
}
Showing after menu is opened:
public onContextMenu(event: MouseEvent, item: any) {
event.preventDefault();
this.contextMenuPosition.x = event.clientX + 'px';
this.contextMenuPosition.y = event.clientY + 'px';
this.matMenuTrigger.menuData = { 'item': item };
this.matMenuTrigger.menuOpened.subscribe(() => {
setTimeout(() => {
const overlayPanes = document.getElementsByClassName('mat-menu-panel') as HTMLCollectionOf<HTMLElement>;
Array.from(overlayPanes).forEach((el) => {
el.style.visibility = 'visible';
});
}, 200);
});
this.matMenuTrigger.openMenu();
}
I am using react-simple-image slider and everything works smoothly but I dont get how to adjust the image to fit to the slider container. The documentation says this:
can customize by className with !important;
.your-app {
.rsis-container {
// do something
}
}
.your-app {
.rsis-image {
background-size: contain !important;
}
}
but I dont understand where to add it in my project (please see files)
files
The Fast Refresh / Hot Reloading in Next.js comes with a small triangle animation in the lower right corner by default:
Is there any way to customise this? I'd like the whole page to turn grey or similar so I get a visual feedback that my file change is actually taking effect and that I didn't happen to change the wrong file or something,.
A very ugly workaround until someone with better next.js knowledge helps out:
// Put this in your _app.js file
if (global.window) {
global.addEventListener('load', (event) => {
const watcher = window.document.getElementById('__next-build-watcher')
if (watcher) {
const newStyle = global.document.createElement('style')
newStyle.innerHTML = '#icon-wrapper { width: 100vw!important; height: 100vh!important; opacity: 0.3!important; } #container { background: rgba(0, 0, 0, 0.3)!important; }'
watcher.shadowRoot.appendChild(newStyle)
}
});
}
Makes that triangle icon 100vw 100vh and semi-transparent instead of 16px 16px .
Question
Is it possible to make a BrowserWindow, in electron, transparent with blur? In that it blurs all background content, including apps and the wallpaper.
And if possible, how would I accomplish this?
Examples
Here are some code I've tried.
index.js:
let win = new BrowserWindow({
fullscreen: true,
fullscreenable: false,
frame: false,
skipTaskbar: true,
resizable: false,
movable: false,
show: false,
alwaysOnTop: true,
transparent: true
})
style.css:
html, body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background-color: rgba(0, 0, 0, 0.5);
color: rgb(255, 255, 255);
backdrop-filter: blur(4px);
}
The html is just a body with a h1 tag with text in it.
Although this only creates a black background in the window.
I read something about this:
webPreferences: {
experimentalFeatures: true
}
But can't get it to work.
Environment
Ubuntu: 18.04.2
Node: v10.15.3
npm: 6.4.1
i3wm. 4.14.1
I have compton running. Maybey it has to do with that. Or the compositing engine in general?
Thanks in advance!
electron-acrylic-window
Actually, it is possible, with a little bit of magic. I have no idea why nobody pointed that out, but there exists a small utility called electron-acrylic-window, which allows you to do exactly that. You can choose between the acrylic ("frosted") and blur effects, as well as change the color of the window and the opacity.
Under the hood, it uses node-gyp and low-level C++ code to render the page however you like. It's pretty easy to implement in Javascript.
The major drawback is that anything that is remotely transparent (and not above anything with a solid color) will be rendered as totally transparent.
Sample usage
index.js
const { BrowserWindow } = require('electron-acrylic-window');
// import { BrowserWindow } from 'electron-acrylic-window';
win = new BrowserWindow({
...,
frame: false,
vibrancy: {
theme: 'light', // (default) or 'dark' or '#rrggbbaa'
effect: 'acrylic', // (default) or 'blur'
disableOnBlur: true, // (default)
}
});
// alternatively use these to
// dynamically change vibrancy
win.setVibrancy([options])
// or
setVibrancy(win, [options])
style.css
body {
background-color: transparent;
}
.watev {
background-color: black;
}
It's not possible to blur other apps in the background.
https://www.electronjs.org/docs/api/frameless-window#limitations
The blur filter only applies to the web page, so there is no way to
apply blur effect to the content below the window (i.e. other
applications open on the user's system).
Electron does not allow you to blur on anything running behind it. It only allows you to blur the content on your webpage/app. Anything in your css styling will only be applied to the foreground contents. I know because I too have tried and failed.
EDIT 2/13: The Panels widget in jQuery Mobile 1.3 now exists! Please use this instead.
I'm trying to write a custom CSS-based transition in jQuery Mobile to simulate the slide-out navigation design pattern.
What I'm trying to accomplish is to have the navigation slide into view and take up 75% of the viewport space. The remaining 25% is filled with the remainder of the previous page.
Here's my CSS:
.slidenav.in { /*New page coming in*/
-webkit-transform: translateX(-75%);
-webkit-animation-name: slidenav-in;
}
#-webkit-keyframes slidenav-in {
from { -webkit-transform: translateX(-75%); }
to { -webkit-transform: translateX(0); }
}
.slidenav.out { /*Old page going out*/
-webkit-transform: translateX(0);
-webkit-animation-name: slidenav-content-out;
}
#-webkit-keyframes slidenav-content-out {
from { -webkit-transform: translateX(0); }
to { -webkit-transform: translateX(75%); }
}
.slidenav.in.reverse { /*Old page coming in*/
-webkit-transform: translateX(75%);
-webkit-animation-name: slidenav-content-in;
}
#-webkit-keyframes slidenav-content-in {
from { -webkit-transform: translateX(75%); }
to { -webkit-transform: translateX(0); }
}
.slidenav.out.reverse { /*New page going out*/
-webkit-transform: translateX(0);
-webkit-animation-name: slidenav-out;
}
#-webkit-keyframes slidenav-out {
from { -webkit-transform: translateX(0); }
to { -webkit-transform: translateX(-75%); }
}
I can't seem to get it to do what I want, though. It removes the old page entirely instead of leaving the remaining 25% of the page in view.
You can see what's happening here (Webkit browsers): http://jsbin.com/ukajeb/7
What am I doing wrong?
EDIT 2/13: The Panels widget in jQuery Mobile 1.3 now exists! Please use this instead.
So I worked some more on this and, with the help of Firebug, discovered that after the keyframe animation was occurring, the original page was being reset to its original position and display set to none.
Knowing this, I started going through the jQuery Mobile docs a bit more thoroughly and found that there are Page Transition Events that you can bind to. More specifically, the pageshow and pagehide events.
Then I set the CSS of the original page manually:
$('[data-role=page]').live('pagehide',function(event, ui){
$(this).css({
"display": "block",
"-webkit-transform": "translateX(75%)"
});
});
$('[data-role=page]').live('pageshow',function(event, ui){
$(this).css({
"display": "",
"-webkit-transform": ""
});
});
Check it out here (Webkit browsers): http://jsbin.com/ukajeb/3
Hope someone else finds this useful as well!
Note: This demo uses jQuery Mobile 1.0.1, which only supports jQuery 1.6.4. This is why .live() was used rather than .on(). However, the upcoming jQuery Mobile 1.1.0 will support jQuery 1.7.1, so moving forward .on() should be used in place of the deprecated .live().
I don't know if this will fully help, but I took a look at this inside of firebug a bit. What I think is happening is when you complete the transition (even the partial one) the active page becomes the menu you are transitioning to. This means the last page is being hidden as it is no longer active. And in fact you can see when the transition completes the other page with "content" disappears.
You might try this on your link that invokes the menu - try using a dialog. You would still need to apply your custom transition there. I think what you are trying to accomplish you may also look into a plugin called "sub page" it may get you to the look you are trying to achieve. Also there is splitview (http://asyraf9.github.com/jquery-mobile/) Alternately you could try messing around with the 1.2 branch of JQM and see if POPUP men may get you there as well. Essentially, it is a div that can sit on top of the existing active page.
Open dialog
I originally was using a dialog with a slide up / down effect - but it became too troublesome in Android so we removed it.
I don't think JQM was really designed by default to keep two pages active and visible at once.