doesnm/quickshare
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(browser): unify styles

Browse source
This commit is contained in:
hexxa 2021-11-21 17:25:27 +08:00 • committed by Hexxa
parent c75b640b7a
commit 8253c82db0
7 changed files with 233 additions and 199 deletions
Download patch file Download diff file Expand all files Collapse all files

63
public/static/css/style.css
View file

@ -110,19 +110,6 @@ body button {
border-radius: 0.6rem; border-radius: 0.6rem;
} */ } */
#op-bar {
/* width: 96%; */
/* max-width: 960px; */
/* position: fixed;
top: 6rem;
right: auto;
bottom: auto;
left: auto; */
line-height: 3rem;
border-radius: 0.6rem;
}
#item-list { #item-list {
margin-top: 2rem; margin-top: 2rem;
} }
@ -189,9 +176,9 @@ body button {
display: block; display: block;
} }
#item-list .item-op { /* #item-list .item-op {
line-height: 4rem; line-height: 4rem;
} } */
tr button { tr button {
background-color: #95a5a6; background-color: #95a5a6;
@ -660,53 +647,11 @@ div.hr {
font-weight: bold; font-weight: bold;
} }
.title-m { /* .alert-red {
font-size: 1.4rem;
/* font-weight: bold; */
line-height: 2rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
overflow-wrap: break-word;
display: block;
}
.desc-m {
font-size: 1.2rem;
line-height: 2rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
overflow-wrap: break-word;
display: block;
}
.title-l {
font-size: 1.8rem;
font-weight: bold;
line-height: 2rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
overflow-wrap: break-word;
display: block;
}
.desc-l {
font-size: 1.2rem;
line-height: 2rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
overflow-wrap: break-word;
display: block;
}
.alert-red {
border: dashed 1px #e74c3c; border: dashed 1px #e74c3c;
color: #e74c3c; color: #e74c3c;
border-radius: 0.5rem; border-radius: 0.5rem;
} } */
.detail { .detail {
font-size: 1.2rem; font-size: 1.2rem;

111
public/static/css/white.css
View file

@ -58,11 +58,112 @@
padding: 2rem; padding: 2rem;
} }
.theme-default .op-bar { .theme-default #breadcrumb {
padding: 1rem;
width: 100%;
}
.theme-default #breadcrumb .item {
color: #697384;
margin-right: 1rem;
/* padding: 1rem; */
}
.theme-default #breadcrumb .item {
color: #697384;
margin-right: 1rem;
/* padding: 1rem; */
}
#browser .container {
width: 100%;
color: #34495e;
background-color: white;
border-radius: 0.8rem;
margin-bottom: 2rem;
}
/* .theme-default #breadcrumb .item:last-child {
margin-right: 0;
} */
.theme-default .select-btn {
width: 8rem;
display: inline-block;
margin: 0 1rem 0 0;
}
.theme-default #op-bar {
}
.theme-default #browser-op {
padding: 1rem;
}
.theme-default #browser-op button {
margin: 0 1rem 0 0;
}
.theme-default #browser {
padding-bottom: 1rem;
}
.theme-default #icon-home {
color: black;
margin-right: 1rem;
}
.theme-default #browser .item-op {
line-height: 4rem;
padding: 1rem;
}
.theme-default #browser .error {
line-height: 4rem;
border: dashed 1px #e74c3c;
background-color: #e74c3c;
border-radius: 0.5rem;
color: white;
margin: 1rem;
padding: 0 1rem;
}
.theme-default .upload-item {
padding: 1rem;
}
.theme-default #share-list {
padding: 1rem;
}
.theme-default #tabs {
padding: 1rem;
}
.theme-default #upload-op {
padding: 1rem;
}
/* .theme-default .op-bar {
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
box-shadow: 0 5px 30px 0 rgba(31, 38, 135, 0.1); box-shadow: 0 5px 30px 0 rgba(31, 38, 135, 0.1);
backdrop-filter: blur(9.5px); backdrop-filter: blur(9.5px);
-webkit-backdrop-filter: blur(9.5px); -webkit-backdrop-filter: blur(9.5px);
} */
.theme-default .red-btn {
background-color: #e74c3c;
color: #fff;
}
.theme-default .blue-btn {
background-color: #3498db;
color: #fff;
}
.theme-default .cyan-btn {
background-color: #1abc9c;
color: #fff;
} }
.theme-default .container-center { .theme-default .container-center {
@ -72,6 +173,11 @@
z-index: 9; z-index: 9;
} }
.theme-default .float {
display: inline-block;
margin: auto 1rem auto auto;
}
.theme-default .float-input { .theme-default .float-input {
display: inline-block; display: inline-block;
margin: auto 1rem 1rem auto; margin: auto 1rem 1rem auto;
@ -135,6 +241,9 @@
.theme-default #tail { .theme-default #tail {
color: #34495e; color: #34495e;
font-size: 1.2rem;
text-align: center;
margin: 4rem auto;
} }
.theme-default input { .theme-default input {

4
src/client/web/build/template/index.template.dev.html
View file

@ -15,11 +15,7 @@
<script src="/static/js/react.development.js?v=16.8.6"></script> <script src="/static/js/react.development.js?v=16.8.6"></script>
<script src="/static/js/react-dom.development.js?v=16.8.6"></script> <script src="/static/js/react-dom.development.js?v=16.8.6"></script>
<script src="/static/js/immutable.min.js?v=4.0.0-rc.12"></script> <script src="/static/js/immutable.min.js?v=4.0.0-rc.12"></script>
<link rel="stylesheet" href="/static/css/animation.css">
<link rel="stylesheet" href="/static/css/color.css">
<link rel="stylesheet" href="/static/css/desktop.css">
<link rel="stylesheet" href="/static/css/reset.css"> <link rel="stylesheet" href="/static/css/reset.css">
<link rel="stylesheet" href="/static/css/style.css">
<link rel="stylesheet" href="/static/css/white.css"> <link rel="stylesheet" href="/static/css/white.css">
<link rel="stylesheet" href="/static/css/default.css"> <link rel="stylesheet" href="/static/css/default.css">
<!-- <link <!-- <link

4
src/client/web/build/template/index.template.html
View file

@ -15,11 +15,7 @@
<script src="/static/js/react.production.min.js?v=16.8.6"></script> <script src="/static/js/react.production.min.js?v=16.8.6"></script>
<script src="/static/js/react-dom.production.min.js?v=16.8.6"></script> <script src="/static/js/react-dom.production.min.js?v=16.8.6"></script>
<script src="/static/js/immutable.min.js?v=4.0.0-rc.12"></script> <script src="/static/js/immutable.min.js?v=4.0.0-rc.12"></script>
<link rel="stylesheet" href="/static/css/animation.css">
<link rel="stylesheet" href="/static/css/color.css">
<link rel="stylesheet" href="/static/css/desktop.css">
<link rel="stylesheet" href="/static/css/reset.css"> <link rel="stylesheet" href="/static/css/reset.css">
<link rel="stylesheet" href="/static/css/style.css">
<link rel="stylesheet" href="/static/css/white.css"> <link rel="stylesheet" href="/static/css/white.css">
<link rel="stylesheet" href="/static/css/default.css"> <link rel="stylesheet" href="/static/css/default.css">
<!-- <link <!-- <link

142
src/client/web/src/components/browser.tsx
View file

@ -365,7 +365,7 @@ export class Browser extends React.Component<Props, State, {}> {
onClick={() => onClick={() =>
this.chdir(this.props.browser.dirPath.slice(0, key + 1)) this.chdir(this.props.browser.dirPath.slice(0, key + 1))
} }
className="grey3-bg grey4-font margin-r-m" className="item"
> >
{pathPart} {pathPart}
</button> </button>
@ -378,37 +378,33 @@ export class Browser extends React.Component<Props, State, {}> {
} pointer`; } pointer`;
const ops = ( const ops = (
<div> <div id="upload-op">
<Flowgrid <div className="float">
grids={List([ <input
<div className="padding-t-m padding-b-m padding-r-m"> type="text"
<input onChange={this.onInputChange}
type="text" value={this.state.inputValue}
onChange={this.onInputChange} placeholder={this.props.msg.pkg.get("browser.folder.name")}
value={this.state.inputValue} className="float"
className="black0-font margin-r-m" />
placeholder={this.props.msg.pkg.get("browser.folder.name")} <button onClick={this.onMkDir} className="float">
/> {this.props.msg.pkg.get("browser.folder.add")}
<button onClick={this.onMkDir} className="margin-r-m"> </button>
{this.props.msg.pkg.get("browser.folder.add")} </div>
</button>
</div>,
<div className="padding-t-m padding-b-m"> <div className="float">
<button onClick={this.onClickUpload}> <button onClick={this.onClickUpload}>
{this.props.msg.pkg.get("browser.upload")} {this.props.msg.pkg.get("browser.upload")}
</button> </button>
<input <input
type="file" type="file"
onChange={this.addUploads} onChange={this.addUploads}
multiple={true} multiple={true}
value={this.props.browser.uploadValue} value={this.props.browser.uploadValue}
ref={this.assignInput} ref={this.assignInput}
className="black0-font hidden" className="hidden"
/> />
</div>, </div>
])}
/>
</div> </div>
); );
@ -573,13 +569,11 @@ export class Browser extends React.Component<Props, State, {}> {
const itemListPane = const itemListPane =
this.props.browser.tab === "" || this.props.browser.tab === "item" ? ( this.props.browser.tab === "" || this.props.browser.tab === "item" ? (
<div> <div id="item-list">
<div id="op-bar" className={`op-bar ${showOp}`}> <div className={`container ${showOp}`}>{ops}</div>
<div className="margin-l-m margin-r-m margin-b-m">{ops}</div>
</div>
<div className="container" style={{ paddingBottom: "1rem" }}> <div className="container">
<div className={`${showOp}`}> <div id="browser-op" className={`${showOp}`}>
<Flexbox <Flexbox
children={List([ children={List([
<span> <span>
@ -591,7 +585,7 @@ export class Browser extends React.Component<Props, State, {}> {
this.props.browser.dirPath.join("/") this.props.browser.dirPath.join("/")
); );
}} }}
className="red0-bg white-font margin-r-m" className="red-btn"
> >
{this.props.msg.pkg.get("browser.share.del")} {this.props.msg.pkg.get("browser.share.del")}
</button> </button>
@ -599,27 +593,25 @@ export class Browser extends React.Component<Props, State, {}> {
<button <button
type="button" type="button"
onClick={this.addSharing} onClick={this.addSharing}
className="cyan0-bg white-font margin-r-m" className="cyan-btn"
> >
{this.props.msg.pkg.get("browser.share.add")} {this.props.msg.pkg.get("browser.share.add")}
</button> </button>
)} )}
</span>,
<span>
{this.state.selectedItems.size > 0 ? ( {this.state.selectedItems.size > 0 ? (
<span> <span>
<button <button
type="button" type="button"
onClick={() => this.delete()} onClick={() => this.delete()}
className="red0-bg white-font margin-r-m" className="red-btn"
> >
{this.props.msg.pkg.get("browser.delete")} {this.props.msg.pkg.get("browser.delete")}
</button> </button>
<button <button type="button" onClick={() => this.moveHere()}>
type="button"
onClick={() => this.moveHere()}
className="margin-r-m"
>
{this.props.msg.pkg.get("browser.paste")} {this.props.msg.pkg.get("browser.paste")}
</button> </button>
</span> </span>
@ -627,35 +619,41 @@ export class Browser extends React.Component<Props, State, {}> {
</span>, </span>,
<span> <span>
<span className="desc-m grey0-font">{`${this.props.msg.pkg.get( <span
id="space-used"
className="desc-m grey0-font"
>{`${this.props.msg.pkg.get(
"browser.used" "browser.used"
)} ${usedSpace} / ${spaceLimit}`}</span> )} ${usedSpace} / ${spaceLimit}`}</span>
</span>, </span>,
])} ])}
className="padding-m" childrenStyles={List([
childrenStyles={List([{}, { justifyContent: "flex-end" }])} { flex: "0 0 auto" },
{ flex: "0 0 auto" },
{ justifyContent: "flex-end" },
])}
/> />
</div> </div>
<Flexbox <Flexbox
children={List([ children={List([
<span className="padding-m"> <span id="breadcrumb">
<Flexbox <Flexbox
children={List([ children={List([
<RiHomeSmileFill <RiHomeSmileFill size="3rem" id="icon-home" />,
size="3rem"
className="margin-r-m black-font"
/>,
<Flexbox children={breadcrumb} />, <Flexbox children={breadcrumb} />,
])} ])}
childrenStyles={List([
{ flex: "0 0 auto" },
{ flex: "0 0 auto" },
])}
/> />
</span>, </span>,
<span className={`padding-m ${showOp}`}> <span className={`${showOp}`}>
<button <button
onClick={() => this.selectAll()} onClick={() => this.selectAll()}
style={{ width: "8rem", display: "inline-block" }} className="select-btn"
> >
{this.props.msg.pkg.get("browser.selectAll")} {this.props.msg.pkg.get("browser.selectAll")}
</button> </button>
@ -683,6 +681,7 @@ export class Browser extends React.Component<Props, State, {}> {
children={List([ children={List([
<RiUploadCloudLine <RiUploadCloudLine
size="3rem" size="3rem"
id="icon-upload"
className="margin-r-m blue0-font" className="margin-r-m blue0-font"
/>, />,
@ -697,16 +696,16 @@ export class Browser extends React.Component<Props, State, {}> {
/> />
</span>, </span>,
<div className="item-op padding-m"> <div className="item-op">
<button <button
onClick={() => this.stopUploading(uploading.filePath)} onClick={() => this.stopUploading(uploading.filePath)}
className="grey3-bg grey4-font margin-r-m" className="float-input"
> >
{this.props.msg.pkg.get("browser.stop")} {this.props.msg.pkg.get("browser.stop")}
</button> </button>
<button <button
onClick={() => this.deleteUpload(uploading.filePath)} onClick={() => this.deleteUpload(uploading.filePath)}
className="grey3-bg grey4-font" className="float-input"
> >
{this.props.msg.pkg.get("browser.delete")} {this.props.msg.pkg.get("browser.delete")}
</button> </button>
@ -715,9 +714,7 @@ export class Browser extends React.Component<Props, State, {}> {
childrenStyles={List([{}, { justifyContent: "flex-end" }])} childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/> />
{uploading.err.trim() === "" ? null : ( {uploading.err.trim() === "" ? null : (
<div className="alert-red margin-s"> <div className="error">{uploading.err.trim()}</div>
<span className="padding-m">{uploading.err.trim()}</span>
</div>
)} )}
</div> </div>
); );
@ -751,10 +748,10 @@ export class Browser extends React.Component<Props, State, {}> {
/> />
</div> </div>
) : ( ) : (
<div className="container padding-b-m"> <div className="container">
<Flexbox <Flexbox
children={List([ children={List([
<span className="padding-m"> <span className="upload-item">
<Flexbox <Flexbox
children={List([ children={List([
<RiUploadCloudFill <RiUploadCloudFill
@ -785,7 +782,7 @@ export class Browser extends React.Component<Props, State, {}> {
const sharingList = this.props.browser.sharings.map((dirPath: string) => { const sharingList = this.props.browser.sharings.map((dirPath: string) => {
return ( return (
<div key={dirPath} className="padding-m"> <div id="share-list" key={dirPath}>
<Flexbox <Flexbox
children={List([ children={List([
<Flexbox <Flexbox
@ -802,7 +799,7 @@ export class Browser extends React.Component<Props, State, {}> {
<input <input
type="text" type="text"
readOnly readOnly
className="margin-r-m" className="float-input"
value={`${ value={`${
document.location.href.split("?")[0] document.location.href.split("?")[0]
}?dir=${encodeURIComponent(dirPath)}`} }?dir=${encodeURIComponent(dirPath)}`}
@ -811,7 +808,7 @@ export class Browser extends React.Component<Props, State, {}> {
onClick={() => { onClick={() => {
this.deleteSharing(dirPath); this.deleteSharing(dirPath);
}} }}
className="grey3-bg grey4-bg" className="float-input"
> >
{this.props.msg.pkg.get("browser.share.del")} {this.props.msg.pkg.get("browser.share.del")}
</button> </button>
@ -885,14 +882,14 @@ export class Browser extends React.Component<Props, State, {}> {
const showTabs = this.props.login.userRole === roleVisitor ? "hidden" : ""; const showTabs = this.props.login.userRole === roleVisitor ? "hidden" : "";
return ( return (
<div> <div>
<div id="item-list"> <div id="browser">
<div className={`container ${showTabs}`}> <div className={`container ${showTabs}`}>
<div className="padding-m"> <div id="tabs">
<button <button
onClick={() => { onClick={() => {
this.setTab("item"); this.setTab("item");
}} }}
className="margin-r-m" className="float"
> >
<Flexbox <Flexbox
children={List([ children={List([
@ -909,7 +906,7 @@ export class Browser extends React.Component<Props, State, {}> {
onClick={() => { onClick={() => {
this.setTab("uploading"); this.setTab("uploading");
}} }}
className="margin-r-m" className="float"
> >
<Flexbox <Flexbox
children={List([ children={List([
@ -928,7 +925,7 @@ export class Browser extends React.Component<Props, State, {}> {
onClick={() => { onClick={() => {
this.setTab("sharing"); this.setTab("sharing");
}} }}
className="margin-r-m" className="float"
> >
<Flexbox <Flexbox
children={List([ children={List([
@ -945,6 +942,7 @@ export class Browser extends React.Component<Props, State, {}> {
</button> </button>
</div> </div>
</div> </div>
<div>{sharingListPane}</div> <div>{sharingListPane}</div>
<div>{uploadingListPane}</div> <div>{uploadingListPane}</div>
{itemListPane} {itemListPane}

106
src/client/web/src/components/pane_admin.tsx
View file

@ -452,7 +452,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
}); });
return ( return (
<div className="font-size-m"> <div className="font-m">
<div className="container"> <div className="container">
<BgCfg <BgCfg
ui={this.props.ui} ui={this.props.ui}
@ -714,66 +714,56 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
childrenStyles={List([{}, { justifyContent: "flex-end" }])} childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/> />
<Flowgrid <div>
grids={List([ <div className="float-input">
<div className="padding-t-m padding-b-m padding-r-m"> <div className="label">{this.props.msg.pkg.get("cfg.bg.url")}</div>
<div className="font-size-s grey1-font"> <input
{this.props.msg.pkg.get("cfg.bg.url")} name="bg_url"
</div> type="text"
<input onChange={this.changeBgUrl}
name="bg_url" value={this.props.ui.bg.url}
type="text" style={{ width: "20rem" }}
onChange={this.changeBgUrl} placeholder={this.props.msg.pkg.get("cfg.bg.url")}
value={this.props.ui.bg.url} />
className="black0-font" </div>
style={{ width: "20rem" }}
placeholder={this.props.msg.pkg.get("cfg.bg.url")}
/>
</div>,
<div className="padding-t-m padding-b-m padding-r-m"> <div className="float-input">
<div className="font-size-s grey1-font"> <div className="label">
{this.props.msg.pkg.get("cfg.bg.repeat")} {this.props.msg.pkg.get("cfg.bg.repeat")}
</div> </div>
<input <input
name="bg_repeat" name="bg_repeat"
type="text" type="text"
onChange={this.changeBgRepeat} onChange={this.changeBgRepeat}
value={this.props.ui.bg.repeat} value={this.props.ui.bg.repeat}
className="black0-font" placeholder={this.props.msg.pkg.get("cfg.bg.repeat")}
placeholder={this.props.msg.pkg.get("cfg.bg.repeat")} />
/> </div>
</div>,
<div className="padding-t-m padding-b-m padding-r-m"> <div className="float-input">
<div className="font-size-s grey1-font"> <div className="label">{this.props.msg.pkg.get("cfg.bg.pos")}</div>
{this.props.msg.pkg.get("cfg.bg.pos")} <input
</div> name="bg_pos"
<input type="text"
name="bg_pos" onChange={this.changeBgPos}
type="text" value={this.props.ui.bg.position}
onChange={this.changeBgPos} placeholder={this.props.msg.pkg.get("cfg.bg.pos")}
value={this.props.ui.bg.position} />
className="black0-font" </div>
placeholder={this.props.msg.pkg.get("cfg.bg.pos")}
/>
</div>,
<div className="padding-t-m padding-b-m padding-r-m"> <div className="float-input">
<div className="font-size-s grey1-font"> <div className="label">
{this.props.msg.pkg.get("cfg.bg.align")} {this.props.msg.pkg.get("cfg.bg.align")}
</div> </div>
<input <input
name="bg_align" name="bg_align"
type="text" type="text"
onChange={this.changeBgAlign} onChange={this.changeBgAlign}
value={this.props.ui.bg.align} value={this.props.ui.bg.align}
className="black0-font" placeholder={this.props.msg.pkg.get("cfg.bg.align")}
placeholder={this.props.msg.pkg.get("cfg.bg.align")} />
/> </div>
</div>, </div>
])}
/>
</div> </div>
); );
} }

2
src/client/web/src/components/pane_settings.tsx
View file

@ -386,7 +386,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
<Flowgrid <Flowgrid
grids={List([ grids={List([
<div className="padding-t-m padding-b-m padding-r-m"> <div className="padding-t-m padding-b-m padding-r-m">
<div className="font-size-s grey1-font"> <div className="font-s grey1-font">
{this.props.msg.pkg.get("prefer.theme.url")} {this.props.msg.pkg.get("prefer.theme.url")}
</div> </div>
<input <input