Browse Source

fix:上传图片框中预览的样式;评论头像、字体样式

zhengyingya 5 years ago
parent
commit
d78b943a18

BIN
lib/assert/close.png View File


+ 24
- 1
lib/components/ContentItem/index.css View File

13
 .comment-item-right {
13
 .comment-item-right {
14
   display: inline-block;
14
   display: inline-block;
15
   width: 90%;
15
   width: 90%;
16
-  margin-left: 10px;
16
+  margin-left: 20px;
17
   margin-bottom: 20px;
17
   margin-bottom: 20px;
18
 }
18
 }
19
 .comment-item-avatar {
19
 .comment-item-avatar {
24
   background-size: cover;
24
   background-size: cover;
25
   cursor: pointer;
25
   cursor: pointer;
26
 }
26
 }
27
+.comment-item-name{
28
+  font-size: 16px;
29
+}
27
 .comment-item-content {
30
 .comment-item-content {
28
   margin: 10px 0;
31
   margin: 10px 0;
32
+  font-size: 16px;
29
   word-break: break-all;
33
   word-break: break-all;
30
 }
34
 }
31
 
35
 
53
 }
57
 }
54
 
58
 
55
 .comment-item-image {
59
 .comment-item-image {
60
+  margin-left: -5px;
56
   width: 400px;
61
   width: 400px;
57
   max-width: 100%;
62
   max-width: 100%;
58
 }
63
 }
121
     margin-left: 10px;
126
     margin-left: 10px;
122
   }
127
   }
123
 }
128
 }
129
+
130
+@media (max-width: 575px) {
131
+  .comment-item-avatar {
132
+    width: 32px;
133
+    height: 32px;
134
+    border-radius: 16px;
135
+  }
136
+  .comment-item-name {
137
+    font-size: 14px;
138
+  } 
139
+  .comment-item-content {
140
+    font-size: 14px;
141
+    margin: 4px 0;
142
+  }
143
+  .comment-item-date {
144
+    font-size: 12px;
145
+  }
146
+}

+ 2
- 1
lib/components/ContentItem/index.js View File

270
               "strong",
270
               "strong",
271
               {
271
               {
272
                 onClick: this.handleUserAvaClick,
272
                 onClick: this.handleUserAvaClick,
273
+                className: "comment-item-name",
273
                 style: { cursor: "pointer" }
274
                 style: { cursor: "pointer" }
274
               },
275
               },
275
               content.user_name || _reactIntlUniversal2.default.get("comment.tourist")
276
               content.user_name || _reactIntlUniversal2.default.get("comment.tourist")
276
             ),
277
             ),
277
             _react2.default.createElement(
278
             _react2.default.createElement(
278
               "span",
279
               "span",
279
-              { style: { marginLeft: 10 } },
280
+              { className: "comment-item-date", style: { marginLeft: 10 } },
280
               _react2.default.createElement(
281
               _react2.default.createElement(
281
                 _tooltip2.default,
282
                 _tooltip2.default,
282
                 {
283
                 {

+ 1
- 1
lib/components/ContentItem/index.js.map
File diff suppressed because it is too large
View File


+ 22
- 0
lib/components/Editor/Upload.css View File

12
   top: -10px;
12
   top: -10px;
13
   right: -15px;
13
   right: -15px;
14
 }
14
 }
15
+
16
+.ant-upload-list-item {
17
+  padding: 0!important;
18
+}
19
+.ant-popover-inner-content {
20
+  position: relative;
21
+}
22
+.ant-upload-list-item-info {
23
+  display: flex;
24
+  align-items: center;
25
+}
26
+
27
+.upload-close-icon {
28
+  position: absolute;
29
+  background: url("../../assert/close.png");
30
+  top: 16px;
31
+  width: 19px;
32
+  height: 19px;
33
+  z-index: 99;
34
+  cursor: pointer;
35
+  color: #989898;
36
+}

+ 49
- 2
lib/components/Editor/Upload.js View File

8
 
8
 
9
 var _modal2 = _interopRequireDefault(_modal);
9
 var _modal2 = _interopRequireDefault(_modal);
10
 
10
 
11
+var _spin = require("antd/es/spin");
12
+
13
+var _spin2 = _interopRequireDefault(_spin);
14
+
11
 var _upload = require("antd/es/upload");
15
 var _upload = require("antd/es/upload");
12
 
16
 
13
 var _upload2 = _interopRequireDefault(_upload);
17
 var _upload2 = _interopRequireDefault(_upload);
24
 
28
 
25
 require("antd/es/modal/style/css");
29
 require("antd/es/modal/style/css");
26
 
30
 
31
+require("antd/es/spin/style/css");
32
+
27
 require("antd/es/upload/style/css");
33
 require("antd/es/upload/style/css");
28
 
34
 
29
 require("antd/es/icon/style/css");
35
 require("antd/es/icon/style/css");
97
 
103
 
98
     _this.state = {
104
     _this.state = {
99
       previewVisible: false,
105
       previewVisible: false,
100
-      previewImage: ""
106
+      previewImage: "",
107
+      loading: false
101
     };
108
     };
102
     _this.handleCancel = _this.handleCancel.bind(_this);
109
     _this.handleCancel = _this.handleCancel.bind(_this);
103
     _this.handlePreview = _this.handlePreview.bind(_this);
110
     _this.handlePreview = _this.handlePreview.bind(_this);
104
     _this.handleChange = _this.handleChange.bind(_this);
111
     _this.handleChange = _this.handleChange.bind(_this);
105
     _this.customRequest = _this.customRequest.bind(_this);
112
     _this.customRequest = _this.customRequest.bind(_this);
113
+    _this.handleCloseClick = _this.handleCloseClick.bind(_this);
114
+    _this.onImgLoad = _this.onImgLoad.bind(_this);
106
     return _this;
115
     return _this;
107
   }
116
   }
108
 
117
 
111
     value: function componentDidMount() {
120
     value: function componentDidMount() {
112
       this.props.app.sOssSts();
121
       this.props.app.sOssSts();
113
     }
122
     }
123
+  }, {
124
+    key: "onImgLoad",
125
+    value: function onImgLoad() {
126
+      this.setState({
127
+        loading: false
128
+      });
129
+    }
114
   }, {
130
   }, {
115
     key: "handleCancel",
131
     key: "handleCancel",
116
     value: function handleCancel() {
132
     value: function handleCancel() {
160
         });
176
         });
161
       };
177
       };
162
     }
178
     }
179
+  }, {
180
+    key: "handleCloseClick",
181
+    value: function handleCloseClick(index) {
182
+      var newFileList = this.props.fileList;
183
+      newFileList.splice(index, 1);
184
+      this.props.onChangeFileList(newFileList);
185
+    }
163
   }, {
186
   }, {
164
     key: "render",
187
     key: "render",
165
     value: function render() {
188
     value: function render() {
189
+      var _this3 = this;
190
+
166
       var _state = this.state,
191
       var _state = this.state,
167
           previewVisible = _state.previewVisible,
192
           previewVisible = _state.previewVisible,
168
           previewImage = _state.previewImage;
193
           previewImage = _state.previewImage;
190
             accept: "image/jpg,image/jpeg,image/png,image/bmp",
215
             accept: "image/jpg,image/jpeg,image/png,image/bmp",
191
             multiple: multiple,
216
             multiple: multiple,
192
             listType: "picture-card",
217
             listType: "picture-card",
218
+            showUploadList: { showPreviewIcon: true, showRemoveIcon: false },
193
             fileList: fileList,
219
             fileList: fileList,
194
             customRequest: this.customRequest,
220
             customRequest: this.customRequest,
195
             onPreview: this.handlePreview,
221
             onPreview: this.handlePreview,
197
           },
223
           },
198
           fileList.length >= maxUpload ? null : uploadButton
224
           fileList.length >= maxUpload ? null : uploadButton
199
         ),
225
         ),
226
+        fileList.map(function (file, index) {
227
+          return _react2.default.createElement("div", {
228
+            className: "upload-close-icon",
229
+            onClick: _this3.handleCloseClick.bind(_this3, index),
230
+            key: file.uid,
231
+            style: {
232
+              left: index % 3 * 112 + 98 + "px",
233
+              top: Math.floor(index / 3) * 112 + 16 + "px"
234
+            }
235
+          });
236
+        }),
200
         _react2.default.createElement(
237
         _react2.default.createElement(
201
           _modal2.default,
238
           _modal2.default,
202
           {
239
           {
205
             footer: null,
242
             footer: null,
206
             onCancel: this.handleCancel
243
             onCancel: this.handleCancel
207
           },
244
           },
208
-          _react2.default.createElement("img", { alt: "upload", style: { width: "100%" }, src: previewImage })
245
+          _react2.default.createElement(
246
+            _spin2.default,
247
+            { spinning: this.state.loading },
248
+            _react2.default.createElement("img", {
249
+              alt: "upload",
250
+              style: { width: "100%" },
251
+              src: previewImage,
252
+              onLoad: this.onImgLoad,
253
+              onError: this.onImgLoad
254
+            })
255
+          )
209
         )
256
         )
210
       );
257
       );
211
     }
258
     }

+ 1
- 1
lib/components/Editor/Upload.js.map
File diff suppressed because it is too large
View File


+ 1
- 1
lib/components/Editor/index.js.map
File diff suppressed because it is too large
View File


+ 3
- 3
lib/version.json View File

1
 {
1
 {
2
     "name":       "comment",
2
     "name":       "comment",
3
-    "buildDate":  1563244545737,
3
+    "buildDate":  1563502412201,
4
     "version":    "1.0.4",
4
     "version":    "1.0.4",
5
-    "numCommits": 162,
6
-    "hash":       "388cc92",
5
+    "numCommits": 168,
6
+    "hash":       "778cc0a",
7
     "dirty":      false
7
     "dirty":      false
8
 }
8
 }

BIN
src/assert/close.png View File


+ 24
- 1
src/components/ContentItem/index.css View File

13
 .comment-item-right {
13
 .comment-item-right {
14
   display: inline-block;
14
   display: inline-block;
15
   width: 90%;
15
   width: 90%;
16
-  margin-left: 10px;
16
+  margin-left: 20px;
17
   margin-bottom: 20px;
17
   margin-bottom: 20px;
18
 }
18
 }
19
 .comment-item-avatar {
19
 .comment-item-avatar {
24
   background-size: cover;
24
   background-size: cover;
25
   cursor: pointer;
25
   cursor: pointer;
26
 }
26
 }
27
+.comment-item-name {
28
+  font-size: 16px;
29
+}
27
 .comment-item-content {
30
 .comment-item-content {
28
   margin: 10px 0;
31
   margin: 10px 0;
32
+  font-size: 16px;
29
   word-break: break-all;
33
   word-break: break-all;
30
 }
34
 }
31
 
35
 
53
 }
57
 }
54
 
58
 
55
 .comment-item-image {
59
 .comment-item-image {
60
+  margin-left: -5px;
56
   width: 400px;
61
   width: 400px;
57
   max-width: 100%;
62
   max-width: 100%;
58
 }
63
 }
121
     margin-left: 10px;
126
     margin-left: 10px;
122
   }
127
   }
123
 }
128
 }
129
+
130
+@media (max-width: 575px) {
131
+  .comment-item-avatar {
132
+    width: 32px;
133
+    height: 32px;
134
+    border-radius: 16px;
135
+  }
136
+  .comment-item-name {
137
+    font-size: 14px;
138
+  }
139
+  .comment-item-content {
140
+    font-size: 14px;
141
+    margin: 4px 0;
142
+  }
143
+  .comment-item-date {
144
+    font-size: 12px;
145
+  }
146
+}

+ 2
- 1
src/components/ContentItem/index.js View File

176
             </a> */}
176
             </a> */}
177
             <strong
177
             <strong
178
               onClick={this.handleUserAvaClick}
178
               onClick={this.handleUserAvaClick}
179
+              className="comment-item-name"
179
               style={{ cursor: "pointer" }}
180
               style={{ cursor: "pointer" }}
180
             >
181
             >
181
               {content.user_name || intl.get("comment.tourist")}
182
               {content.user_name || intl.get("comment.tourist")}
182
             </strong>
183
             </strong>
183
-            <span style={{ marginLeft: 10 }}>
184
+            <span className="comment-item-date" style={{ marginLeft: 10 }}>
184
               <Tooltip
185
               <Tooltip
185
                 placement="top"
186
                 placement="top"
186
                 title={dayjs(content.created * 1000).format(
187
                 title={dayjs(content.created * 1000).format(

+ 22
- 0
src/components/Editor/Upload.css View File

12
   top: -10px;
12
   top: -10px;
13
   right: -15px;
13
   right: -15px;
14
 }
14
 }
15
+
16
+.ant-upload-list-item {
17
+  padding: 0 !important;
18
+}
19
+.ant-popover-inner-content {
20
+  position: relative;
21
+}
22
+.ant-upload-list-item-info {
23
+  display: flex;
24
+  align-items: center;
25
+}
26
+
27
+.upload-close-icon {
28
+  position: absolute;
29
+  background: url("../../assert/close.png");
30
+  top: 16px;
31
+  width: 19px;
32
+  height: 19px;
33
+  z-index: 99;
34
+  cursor: pointer;
35
+  color: #989898;
36
+}

+ 40
- 3
src/components/Editor/Upload.js View File

1
 import React from "react";
1
 import React from "react";
2
-import { Upload, Icon, Modal, message } from "antd";
2
+import { Upload, Icon, Modal, message, Spin } from "antd";
3
 import dayjs from "dayjs";
3
 import dayjs from "dayjs";
4
 import shortid from "shortid";
4
 import shortid from "shortid";
5
 import intl from "react-intl-universal";
5
 import intl from "react-intl-universal";
47
     super(props);
47
     super(props);
48
     this.state = {
48
     this.state = {
49
       previewVisible: false,
49
       previewVisible: false,
50
-      previewImage: ""
50
+      previewImage: "",
51
+      loading: false
51
     };
52
     };
52
     this.handleCancel = this.handleCancel.bind(this);
53
     this.handleCancel = this.handleCancel.bind(this);
53
     this.handlePreview = this.handlePreview.bind(this);
54
     this.handlePreview = this.handlePreview.bind(this);
54
     this.handleChange = this.handleChange.bind(this);
55
     this.handleChange = this.handleChange.bind(this);
55
     this.customRequest = this.customRequest.bind(this);
56
     this.customRequest = this.customRequest.bind(this);
57
+    this.handleCloseClick = this.handleCloseClick.bind(this);
58
+    this.onImgLoad = this.onImgLoad.bind(this);
56
   }
59
   }
57
 
60
 
58
   componentDidMount() {
61
   componentDidMount() {
59
     this.props.app.sOssSts();
62
     this.props.app.sOssSts();
60
   }
63
   }
61
 
64
 
65
+  onImgLoad() {
66
+    this.setState({
67
+      loading: false
68
+    });
69
+  }
70
+
62
   handleCancel() {
71
   handleCancel() {
63
     this.setState({ previewVisible: false });
72
     this.setState({ previewVisible: false });
64
   }
73
   }
101
     };
110
     };
102
   }
111
   }
103
 
112
 
113
+  handleCloseClick(index) {
114
+    let newFileList = this.props.fileList;
115
+    newFileList.splice(index, 1);
116
+    this.props.onChangeFileList(newFileList);
117
+  }
118
+
104
   render() {
119
   render() {
105
     const { previewVisible, previewImage } = this.state;
120
     const { previewVisible, previewImage } = this.state;
106
     const { fileList, maxUpload, multiple } = this.props;
121
     const { fileList, maxUpload, multiple } = this.props;
116
           accept="image/jpg,image/jpeg,image/png,image/bmp"
131
           accept="image/jpg,image/jpeg,image/png,image/bmp"
117
           multiple={multiple}
132
           multiple={multiple}
118
           listType="picture-card"
133
           listType="picture-card"
134
+          showUploadList={{ showPreviewIcon: true, showRemoveIcon: false }}
119
           fileList={fileList}
135
           fileList={fileList}
120
           customRequest={this.customRequest}
136
           customRequest={this.customRequest}
121
           onPreview={this.handlePreview}
137
           onPreview={this.handlePreview}
123
         >
139
         >
124
           {fileList.length >= maxUpload ? null : uploadButton}
140
           {fileList.length >= maxUpload ? null : uploadButton}
125
         </Upload>
141
         </Upload>
142
+        {fileList.map((file, index) => {
143
+          return (
144
+            <div
145
+              className="upload-close-icon"
146
+              onClick={this.handleCloseClick.bind(this, index)}
147
+              key={file.uid}
148
+              style={{
149
+                left: `${(index % 3) * 112 + 98}px`,
150
+                top: `${Math.floor(index / 3) * 112 + 16}px`
151
+              }}
152
+            />
153
+          );
154
+        })}
126
         <Modal
155
         <Modal
127
           className="upload-img-preview"
156
           className="upload-img-preview"
128
           visible={previewVisible}
157
           visible={previewVisible}
129
           footer={null}
158
           footer={null}
130
           onCancel={this.handleCancel}
159
           onCancel={this.handleCancel}
131
         >
160
         >
132
-          <img alt="upload" style={{ width: "100%" }} src={previewImage} />
161
+          <Spin spinning={this.state.loading}>
162
+            <img
163
+              alt="upload"
164
+              style={{ width: "100%" }}
165
+              src={previewImage}
166
+              onLoad={this.onImgLoad}
167
+              onError={this.onImgLoad}
168
+            />
169
+          </Spin>
133
         </Modal>
170
         </Modal>
134
       </div>
171
       </div>
135
     );
172
     );