pro/im_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wallpapers are done except the dark mode

Browse Source
This commit is contained in:
or-else
2025-10-22 16:04:18 +04:00
parent 0f8d94ac2f
commit 478fb421bf
7 changed files with 42 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/base.css
+23 -17
View File
@@ -42,11 +42,12 @@
--clr-text-primary: light-dark(#666, #999); /* Default text color */
--clr-text-secondary: light-dark(#757575, #8a8a8a); /* Muted text, icons e.g. menu trigger */
--clr-text-tertiary: light-dark(#999, #787878); /* Even more muted text, borders, some icons */
--clr-text-tertiary-activated: #888; /* Activated (hover, focus) tertiary text */
--clr-text-placeholder: light-dark(#bbb, #555); /* Placeholder text */
--clr-text-disabled: light-dark(#888, #777); /* Disabled text e.g. in-place-edit */
--clr-border-light: light-dark(#ccc, #555); /* Common light border, separator */
--clr-border-muted: light-dark(#ddd, #444); /* Softer border, e.g. in-place-edit dashed */
--clr-background-off-white: light-dark(#fafafa, #282828); /* Common very light background */
--clr-background-off-white: light-dark(#fafafa, #222); /* Common very light background */
--clr-background-light-gray: light-dark(#f0f0f0, #0f0f0f); /* HR background, action button hover */
--clr-background-extra-light-gray: light-dark(#eee, #222); /* Flat button faux bg, tabbar bg, chip bg */
--clr-background-blue-gray-50: light-dark(#edf0f2, #202c33); /* Contact hover, messages panel, send message panel */
@@ -829,7 +830,7 @@ div.trusted-badge {
.action-button {
display: block;
position: absolute;
color: var(--clr-text-tertiary);
color: var(--clr-text-secondary);
font-size: 1.8rem;
background-color: var(--clr-background-off-white);
border-radius: 50%;
@@ -845,12 +846,15 @@ div.trusted-badge {
z-index: 2;
}
.action-button:focus, .action-button:hover {
color: var(--clr-text-disabled);
.action-button:focus,
.action-button:hover,
.action-button:hover:not([disabled]),
.action-button:active:not([disabled]) {
color: var(--clr-text-tertiary-activated);
background-color: var(--clr-background-light-gray);
}
.action-button:active {
color: light-dark(#777, #666); /* #777 */
color: var(--clr-text-tertiary-activated);
background-color: var(--clr-background-extra-light-gray);
}
@@ -1763,28 +1767,36 @@ img.channel {
align-self: center;
}
/* Scrollable panel where the messages are shown */
#messages-panel {
#messages-container {
position: relative;
padding: 0.75rem;
overflow-y: scroll;
background-color: var(--clr-background-blue-gray-50);
overflow-y: hidden;
height: 100%;
}
#messages-panel::before {
#messages-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: var(--clr-background-blue-gray-50);
background-image: var(--wallpaper-url);
background-repeat: var(--wallpaper-repeat);
background-size: var(--wallpaper-size);
background-position: var(--wallpaper-position);
filter: blur(var(--wallpaper-blur)) invert(var(--wallpaper-invert));
pointer-events: none;
z-index: 0;
}
/* Scrollable panel where the messages are shown */
#messages-panel {
position: relative;
padding: 0.75rem;
overflow-y: scroll;
height: 100%;
}
/* Dark mode asigned by the OS */
@@ -1799,12 +1811,6 @@ img.channel {
background-image: url("../img/bg_messages_dk.png");
}
#messages-container {
position: relative;
overflow-y: hidden;
height: 100%;
}
#write-only-background {
position: absolute;
top: 0;
css/base.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
src/views/wallpapers.jsx
+8 -5
View File
@@ -10,7 +10,8 @@ export default class WallpapersView extends React.PureComponent {
super(props);
this.state = {
tab: WALLPAPER_DEFAULTS.type, // 'patt' | 'img'
tab: WALLPAPER_DEFAULTS.type, // currently selected tab: 'patt' | 'img'
selectedType: WALLPAPER_DEFAULTS.type, // type of the selected wallpaper.
wallpaper: imageIndex[WALLPAPER_DEFAULTS.type][WALLPAPER_DEFAULTS.index].name,
blur: 0,
};
@@ -39,11 +40,11 @@ export default class WallpapersView extends React.PureComponent {
e.preventDefault();
type = this.state.tab;
index = e.currentTarget.dataset.id;
blur = this.state.blur;
blur = type == 'patt' ? 0 : this.state.blur;
}
const fname = imageIndex[type][index].name;
const size = type == 'patt' ? imageIndex[type][index].size : 0;
this.setState({tab: type, wallpaper: fname, blur: 0});
this.setState({tab: type, wallpaper: fname, selectedType: type, blur: blur});
this.props.onWallpaperSelected(`../${WALLPAPER_DEFAULTS.path}${fname}`, size, this.blurValues[blur]);
}
@@ -51,8 +52,10 @@ export default class WallpapersView extends React.PureComponent {
e.preventDefault();
const blur = e.currentTarget.value;
this.setState({blur: blur});
// Path relative to CSS file.
this.props.onWallpaperSelected(`../${WALLPAPER_DEFAULTS.path}${this.state.wallpaper}`, 0, this.blurValues[blur]);
if (this.state.selectedType == 'img') {
// Apply blur to patterns only. Path relative to CSS file.
this.props.onWallpaperSelected(`../${WALLPAPER_DEFAULTS.path}${this.state.wallpaper}`, 0, this.blurValues[blur]);
}
}
render() {
umd/827.prod.js
+1 -1
View File
@@ -1,2 +1,2 @@
"use strict";(self.webpackChunktinode_webapp=self.webpackChunktinode_webapp||[]).push([[827],{3827:function(e,a,t){t.r(a),t.d(a,{default:function(){return d}});var l=t(1594),s=t.n(l),r=t(8181),n=t(7151),i=t(9027),c=t(1781);class d extends s().PureComponent{constructor(e){super(e),this.state={tab:i.S.type,wallpaper:c[i.S.type][i.S.index].name,blur:0},this.blurValues=[0,1,2,4,8,16],this.handleTabClick=this.handleTabClick.bind(this),this.handleWallpaperSelected=this.handleWallpaperSelected.bind(this),this.handleBlurChanged=this.handleBlurChanged.bind(this)}handleTabClick(e){e.preventDefault(),n.A.navigateTo(n.A.addUrlParam(window.location.hash,"tab",e.currentTarget.dataset.id)),this.setState({tab:e.currentTarget.dataset.id})}handleWallpaperSelected(e){let a,t,l;e?(e.preventDefault(),t=this.state.tab,a=e.currentTarget.dataset.id,l=this.state.blur):(t=i.S.type,a=i.S.index,l=0);const s=c[t][a].name,r="patt"==t?c[t][a].size:0;this.setState({tab:t,wallpaper:s,blur:0}),this.props.onWallpaperSelected(`../${i.S.path}${s}`,r,this.blurValues[l])}handleBlurChanged(e){e.preventDefault();const a=e.currentTarget.value;this.setState({blur:a}),this.props.onWallpaperSelected(`../${i.S.path}${this.state.wallpaper}`,0,this.blurValues[a])}render(){return s().createElement("div",{className:"flex-column"},s().createElement("div",{className:"panel-form-row clean-clickable"},s().createElement("a",{className:"flat-button",onClick:()=>this.handleWallpaperSelected(null)},s().createElement("i",{className:"material-icons"},"undo")," ",s().createElement(r.FormattedMessage,{id:"button_restore",defaultMessage:[{type:0,value:"Restore default"}]}))),s().createElement("ul",{className:"tabbar"},s().createElement("li",{className:"patt"===this.state.tab?"active":null},s().createElement("a",{href:"#","data-id":"patt",onClick:this.handleTabClick},s().createElement(r.FormattedMessage,{id:"tabtitle_pattern",defaultMessage:[{type:0,value:"pattern"}]}))),s().createElement("li",{className:"img"===this.state.tab?"active":null},s().createElement("a",{href:"#","data-id":"img",onClick:this.handleTabClick},s().createElement(r.FormattedMessage,{id:"tabtitle_image",defaultMessage:[{type:0,value:"image"}]})))),s().createElement("div",{id:"settings-form",className:"scrollable-panel"},"patt"===this.state.tab?s().createElement("div",{className:"image-grid"},c.patt.map((e,a)=>{const t=this.state.wallpaper===e.name?" selected":"";return s().createElement("div",{key:a,"data-id":a,className:`image-grid-cell${t}`,onClick:this.handleWallpaperSelected},s().createElement("img",{src:i.S.path+e.name,alt:e.name,style:{width:`${e.size}px`,height:`${e.size}px`}}))})):s().createElement(s().Fragment,null,s().createElement("div",{className:"panel-form-column"},s().createElement("div",{className:"panel-form-row"},s().createElement("label",{className:"small"},s().createElement(r.FormattedMessage,{id:"label_blur_wallpaper",defaultMessage:[{type:0,value:"Blur:"}]}))),s().createElement("div",{className:"panel-form-row"},s().createElement("input",{type:"range",id:"blur",name:"blur",min:"0",max:"5",step:"1",value:this.state.blur,onChange:this.handleBlurChanged}))),s().createElement("div",{className:"image-grid"},c.img.map((e,a)=>{const t=this.state.wallpaper===e.name?" selected":"";return s().createElement("div",{key:a,"data-id":a,className:`image-grid-cell${t}`,onClick:this.handleWallpaperSelected},s().createElement("img",{src:i.S.path+e.pr,alt:e.name,style:{width:"100%",height:"100%"}}))})))))}}}}]);
"use strict";(self.webpackChunktinode_webapp=self.webpackChunktinode_webapp||[]).push([[827],{3827:function(e,t,a){a.r(t),a.d(t,{default:function(){return d}});var l=a(1594),s=a.n(l),r=a(8181),n=a(7151),i=a(9027),c=a(1781);class d extends s().PureComponent{constructor(e){super(e),this.state={tab:i.S.type,selectedType:i.S.type,wallpaper:c[i.S.type][i.S.index].name,blur:0},this.blurValues=[0,1,2,4,8,16],this.handleTabClick=this.handleTabClick.bind(this),this.handleWallpaperSelected=this.handleWallpaperSelected.bind(this),this.handleBlurChanged=this.handleBlurChanged.bind(this)}handleTabClick(e){e.preventDefault(),n.A.navigateTo(n.A.addUrlParam(window.location.hash,"tab",e.currentTarget.dataset.id)),this.setState({tab:e.currentTarget.dataset.id})}handleWallpaperSelected(e){let t,a,l;e?(e.preventDefault(),a=this.state.tab,t=e.currentTarget.dataset.id,l="patt"==a?0:this.state.blur):(a=i.S.type,t=i.S.index,l=0);const s=c[a][t].name,r="patt"==a?c[a][t].size:0;this.setState({tab:a,wallpaper:s,selectedType:a,blur:l}),this.props.onWallpaperSelected(`../${i.S.path}${s}`,r,this.blurValues[l])}handleBlurChanged(e){e.preventDefault();const t=e.currentTarget.value;this.setState({blur:t}),"img"==this.state.selectedType&&this.props.onWallpaperSelected(`../${i.S.path}${this.state.wallpaper}`,0,this.blurValues[t])}render(){return s().createElement("div",{className:"flex-column"},s().createElement("div",{className:"panel-form-row clean-clickable"},s().createElement("a",{className:"flat-button",onClick:()=>this.handleWallpaperSelected(null)},s().createElement("i",{className:"material-icons"},"undo")," ",s().createElement(r.FormattedMessage,{id:"button_restore",defaultMessage:[{type:0,value:"Restore default"}]}))),s().createElement("ul",{className:"tabbar"},s().createElement("li",{className:"patt"===this.state.tab?"active":null},s().createElement("a",{href:"#","data-id":"patt",onClick:this.handleTabClick},s().createElement(r.FormattedMessage,{id:"tabtitle_pattern",defaultMessage:[{type:0,value:"pattern"}]}))),s().createElement("li",{className:"img"===this.state.tab?"active":null},s().createElement("a",{href:"#","data-id":"img",onClick:this.handleTabClick},s().createElement(r.FormattedMessage,{id:"tabtitle_image",defaultMessage:[{type:0,value:"image"}]})))),s().createElement("div",{id:"settings-form",className:"scrollable-panel"},"patt"===this.state.tab?s().createElement("div",{className:"image-grid"},c.patt.map((e,t)=>{const a=this.state.wallpaper===e.name?" selected":"";return s().createElement("div",{key:t,"data-id":t,className:`image-grid-cell${a}`,onClick:this.handleWallpaperSelected},s().createElement("img",{src:i.S.path+e.name,alt:e.name,style:{width:`${e.size}px`,height:`${e.size}px`}}))})):s().createElement(s().Fragment,null,s().createElement("div",{className:"panel-form-column"},s().createElement("div",{className:"panel-form-row"},s().createElement("label",{className:"small"},s().createElement(r.FormattedMessage,{id:"label_blur_wallpaper",defaultMessage:[{type:0,value:"Blur:"}]}))),s().createElement("div",{className:"panel-form-row"},s().createElement("input",{type:"range",id:"blur",name:"blur",min:"0",max:"5",step:"1",value:this.state.blur,onChange:this.handleBlurChanged}))),s().createElement("div",{className:"image-grid"},c.img.map((e,t)=>{const a=this.state.wallpaper===e.name?" selected":"";return s().createElement("div",{key:t,"data-id":t,className:`image-grid-cell${a}`,onClick:this.handleWallpaperSelected},s().createElement("img",{src:i.S.path+e.pr,alt:e.name,style:{width:"100%",height:"100%"}}))})))))}}}}]);
//# sourceMappingURL=827.prod.js.map
umd/827.prod.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/src_views_wallpapers_jsx.dev.js
+7 -3
View File
@@ -28,6 +28,7 @@ class WallpapersView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureC
super(props);
this.state = {
tab: _config_js__WEBPACK_IMPORTED_MODULE_3__.WALLPAPER_DEFAULTS.type,
selectedType: _config_js__WEBPACK_IMPORTED_MODULE_3__.WALLPAPER_DEFAULTS.type,
wallpaper: _img_bkg_index_json__WEBPACK_IMPORTED_MODULE_4__[_config_js__WEBPACK_IMPORTED_MODULE_3__.WALLPAPER_DEFAULTS.type][_config_js__WEBPACK_IMPORTED_MODULE_3__.WALLPAPER_DEFAULTS.index].name,
blur: 0
};
@@ -53,14 +54,15 @@ class WallpapersView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureC
e.preventDefault();
type = this.state.tab;
index = e.currentTarget.dataset.id;
blur = this.state.blur;
blur = type == 'patt' ? 0 : this.state.blur;
}
const fname = _img_bkg_index_json__WEBPACK_IMPORTED_MODULE_4__[type][index].name;
const size = type == 'patt' ? _img_bkg_index_json__WEBPACK_IMPORTED_MODULE_4__[type][index].size : 0;
this.setState({
tab: type,
wallpaper: fname,
blur: 0
selectedType: type,
blur: blur
});
this.props.onWallpaperSelected(`../${_config_js__WEBPACK_IMPORTED_MODULE_3__.WALLPAPER_DEFAULTS.path}${fname}`, size, this.blurValues[blur]);
}
@@ -70,7 +72,9 @@ class WallpapersView extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureC
this.setState({
blur: blur
});
this.props.onWallpaperSelected(`../${_config_js__WEBPACK_IMPORTED_MODULE_3__.WALLPAPER_DEFAULTS.path}${this.state.wallpaper}`, 0, this.blurValues[blur]);
if (this.state.selectedType == 'img') {
this.props.onWallpaperSelected(`../${_config_js__WEBPACK_IMPORTED_MODULE_3__.WALLPAPER_DEFAULTS.path}${this.state.wallpaper}`, 0, this.blurValues[blur]);
}
}
render() {
return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
umd/src_views_wallpapers_jsx.dev.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long