haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-04 00:20:07 +00:00
Code Issues Releases Wiki Activity

change share to user style (#6406)

Browse Source
This commit is contained in:
Michael An
2024-07-23 21:15:02 +08:00
committed by GitHub
parent ffe3987bc9
commit 2bc5ef7957
3 changed files with 95 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/components/dialog/share-to-user.js
View File

@@ -1,14 +1,14 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { gettext, isPro } from '../../utils/constants';
import { Button } from 'reactstrap'; import { Button } from 'reactstrap';
import { gettext, isPro } from '../../utils/constants';
import { seafileAPI } from '../../utils/seafile-api'; import { seafileAPI } from '../../utils/seafile-api';
import { Utils } from '../../utils/utils'; import { Utils } from '../../utils/utils';
import toaster from '../toast'; import toaster from '../toast';
import UserSelect from '../user-select'; import UserSelect from '../user-select';
import SharePermissionEditor from '../select-editor/share-permission-editor'; import SharePermissionEditor from '../select-editor/share-permission-editor';
import '../../css/invitations.css';
import '../../css/invitations.css';
import '../../css/share-to-user.css'; import '../../css/share-to-user.css';
class UserItem extends React.Component { class UserItem extends React.Component {
@@ -38,13 +38,11 @@ class UserItem extends React.Component {
}; };
deleteShareItem = () => { deleteShareItem = () => {
let item = this.props.item; this.props.deleteShareItem(this.props.item.user_info.name);
this.props.deleteShareItem(item.user_info.name);
}; };
onChangeUserPermission = (permission) => { onChangeUserPermission = (permission) => {
let item = this.props.item; this.props.onChangeUserPermission(this.props.item, permission);
this.props.onChangeUserPermission(item, permission);
}; };
render() { render() {
@@ -54,7 +52,7 @@ class UserItem extends React.Component {
return ( return (
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} tabIndex="0" onFocus={this.onMouseEnter}> <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} tabIndex="0" onFocus={this.onMouseEnter}>
<td className="name"> <td className="name">
<div className="position-relative"> <div className="position-relative d-flex align-items-center">
<img <img
src={item.user_info.avatar_url} src={item.user_info.avatar_url}
width="24" width="24"
@@ -67,9 +65,12 @@ class UserItem extends React.Component {
{isUserDetailsPopoverOpen && ( {isUserDetailsPopoverOpen && (
<div className="user-details-popover p-4 position-absolute w-100 mt-1"> <div className="user-details-popover p-4 position-absolute w-100 mt-1">
<div className="user-details-main pb-3"> <div className="user-details-main pb-3">
<img src={item.user_info.avatar_url} width="40" <img
src={item.user_info.avatar_url}
width="40"
alt={item.user_info.nickname} alt={item.user_info.nickname}
className="rounded-circle mr-2" /> className="rounded-circle mr-2"
/>
<span className="user-details-name">{item.user_info.nickname}</span> <span className="user-details-name">{item.user_info.nickname}</span>
</div> </div>
<dl className="m-0 mt-3 d-flex"> <dl className="m-0 mt-3 d-flex">

167
frontend/src/css/share-link-dialog.css
View File

@@ -1,71 +1,67 @@
.share-dialog .share-dialog-content { .share-dialog .share-dialog-content {
padding: 0; padding: 0;
min-height: 27rem; min-height: 27rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
}
.share-dialog-content .share-dialog-side {
flex-basis: 22%;
padding: 1rem;
border-bottom: 1px solid #eee;
}
.share-dialog .nav .nav-item .nav-link {
padding: 0.3125rem 0.25rem;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.share-dialog .share-dialog-content { .share-dialog .share-dialog-content {
flex-direction: row; flex-direction: row;
} }
}
.share-dialog-content .share-dialog-side {
/*display: flex;*/
flex-basis: 22%;
padding: 1rem;
border-bottom: 1px solid #eee;
}
.share-dialog .nav .nav-item .nav-link {
padding: 0.3125rem 0.25rem;
}
@media (min-width: 768px) {
.share-dialog-content .share-dialog-side { .share-dialog-content .share-dialog-side {
padding: 12px 8px; padding: 12px 8px;
border: 0; border: 0;
border-right: 1px solid #eee; border-right: 1px solid #eee;
} }
.share-dialog-side .nav { .share-dialog-side .nav {
flex-direction: column; flex-direction: column;
} }
.share-dialog-side .nav-pills .nav-item .nav-link { .share-dialog-side .nav-pills .nav-item .nav-link {
width: 100%; width: 100%;
padding: 0.3125rem 0.5rem; padding: 0.3125rem 0.5rem;
margin: 0; margin: 0;
} }
} }
.share-dialog-content .share-dialog-main { .share-dialog-content .share-dialog-main {
display: flex; display: flex;
flex-basis: 78%; flex-basis: 78%;
padding: 1rem; padding: 1rem;
} }
.share-dialog-content .share-dialog-main .tab-content { .share-dialog-content .share-dialog-main .tab-content {
flex: 1; flex: 1;
} }
.share-dialog-content .share-dialog-main .tab-pane { .share-dialog-content .share-dialog-main .tab-pane {
height: 100%; height: 100%;
} }
.share-list-container { .share-list-container {
max-height: 20rem; max-height: 20rem;
min-height: 10rem; min-height: 15rem;
overflow: auto; overflow: auto;
} }
.share-list-container.share-link-list { .share-list-container.share-link-list {
max-height: 23rem; max-height: 23rem;
overflow: hidden; overflow: hidden;
} }
#share-link-panel .table-real-container { #share-link-panel .table-real-container {
height: 20rem; height: 20rem;
overflow: auto; overflow: auto;
} }
#share-link-panel .link-authenticated-op:hover { #share-link-panel .link-authenticated-op:hover {
@@ -75,52 +71,52 @@
} }
.share-dialog-content label { .share-dialog-content label {
padding: 0.5rem 0 0.25rem; padding: 0.5rem 0 0.25rem;
} }
.share-dialog-content label.form-check-label { .share-dialog-content label.form-check-label {
padding: 0.25rem 0; padding: 0.25rem 0;
} }
.link-operation-content { .link-operation-content {
margin-left: 1.25rem; margin-left: 1.25rem;
} }
.link-operation-icon { .link-operation-icon {
color: #9aa0ac; color: #9aa0ac;
} }
.tip { .tip {
color: #808080; color: #808080;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.generate-share-link .passwd, .generate-share-link .passwd,
.generate-upload-link .passwd { .generate-upload-link .passwd {
width: 60%; width: 60%;
} }
.generate-share-link .permission { .generate-share-link .permission {
margin-left: 2.5rem; margin-left: 2.5rem;
} }
.generate-link-btn { .generate-link-btn {
margin-top: 1.125rem; margin-top: 1.125rem;
} }
input.expire-input { input.expire-input {
display: inline-block; display: inline-block;
width: 4rem; width: 4rem;
height: 1.5rem; height: 1.5rem;
padding: 0.25rem 0.25rem; padding: 0.25rem 0.25rem;
margin: 0 0.25rem 0 1.25rem; margin: 0 0.25rem 0 1.25rem;
} }
.expire-input-border { .expire-input-border {
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
height: 2.375rem!important; height: 2.375rem!important;
padding: 0.375rem 0.75rem!important; padding: 0.375rem 0.75rem!important;
} }
.share-dialog-main .permission-editor .permission-editor__menu { .share-dialog-main .permission-editor .permission-editor__menu {
@@ -128,54 +124,55 @@ input.expire-input {
} }
.expir-span { .expir-span {
border: 1px solid rgba(0, 40, 100, 0.12); border: 1px solid rgba(0, 40, 100, 0.12);
border-left: none; border-left: none;
font-size: 0.9375rem; font-size: 0.9375rem;
margin-left: -5px; margin-left: -5px;
padding: 0px 8px; padding: 0px 8px;
height: 2.375rem; height: 2.375rem;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
position: absolute; position: absolute;
top: 4px; top: 4px;
min-width: 2.375rem; min-width: 2.375rem;
line-height: 2.25; line-height: 2.25;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
border-top-right-radius: 3px; border-top-right-radius: 3px;
} }
.custom-permission .permission-header { .custom-permission .permission-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: .375rem 0; padding: .375rem 0;
border-bottom: 1px solid #efefef; border-bottom: 1px solid #efefef;
} }
.custom-permission .permission-header .back-icon { .custom-permission .permission-header .back-icon {
color: #999; color: #999;
margin-right: 10px; margin-right: 10px;
cursor: pointer; cursor: pointer;
} }
.custom-permission .permission-name-desc { .custom-permission .permission-name-desc {
margin-top: .375rem; margin-top: .375rem;
} }
.custom-permission .permission-name-desc label { .custom-permission .permission-name-desc label {
font-size: 14px; font-size: 14px;
color: #999; color: #999;
} }
.custom-permission .permission-name-desc .permission-name, .custom-permission .permission-name-desc .permission-name,
.custom-permission .permission-name-desc .permission-desc { .custom-permission .permission-name-desc .permission-desc {
flex: 1; flex: 1;
} }
.custom-permission .permission-name-desc .permission-desc { .custom-permission .permission-name-desc .permission-desc {
margin-left: .4rem; margin-left: .4rem;
} }
.custom-permission .permissions-list-body { .custom-permission .permissions-list-body {
max-height: 350px; max-height: 350px;
overflow-y: scroll; overflow-y: scroll;
} }

3
frontend/src/css/share-to-user.css
View File

@@ -5,10 +5,13 @@
background: #fff; background: #fff;
z-index: 1000; z-index: 1000;
left: 2px; left: 2px;
top: 24px;
} }
.user-details-main { .user-details-main {
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
} }
.user-details-name { .user-details-name {
font-size: 1rem; font-size: 1rem;
font-weight: 500; font-weight: 500;