Explorar el Código

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

zhengyingya hace 5 años
padre
commit
d78b943a18

BIN
lib/assert/close.png Ver fichero


+ 24
- 1
lib/components/ContentItem/index.css Ver fichero

@@ -13,7 +13,7 @@
13 13
 .comment-item-right {
14 14
   display: inline-block;
15 15
   width: 90%;
16
-  margin-left: 10px;
16
+  margin-left: 20px;
17 17
   margin-bottom: 20px;
18 18
 }
19 19
 .comment-item-avatar {
@@ -24,8 +24,12 @@
24 24
   background-size: cover;
25 25
   cursor: pointer;
26 26
 }
27
+.comment-item-name{
28
+  font-size: 16px;
29
+}
27 30
 .comment-item-content {
28 31
   margin: 10px 0;
32
+  font-size: 16px;
29 33
   word-break: break-all;
30 34
 }
31 35
 
@@ -53,6 +57,7 @@
53 57
 }
54 58
 
55 59
 .comment-item-image {
60
+  margin-left: -5px;
56 61
   width: 400px;
57 62
   max-width: 100%;
58 63
 }
@@ -121,3 +126,21 @@
121 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 Ver fichero

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

+ 1
- 1
lib/components/ContentItem/index.js.map
La diferencia del archivo ha sido suprimido porque es demasiado grande
Ver fichero


+ 22
- 0
lib/components/Editor/Upload.css Ver fichero

@@ -12,3 +12,25 @@
12 12
   top: -10px;
13 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 Ver fichero

@@ -8,6 +8,10 @@ var _modal = require("antd/es/modal");
8 8
 
9 9
 var _modal2 = _interopRequireDefault(_modal);
10 10
 
11
+var _spin = require("antd/es/spin");
12
+
13
+var _spin2 = _interopRequireDefault(_spin);
14
+
11 15
 var _upload = require("antd/es/upload");
12 16
 
13 17
 var _upload2 = _interopRequireDefault(_upload);
@@ -24,6 +28,8 @@ var _createClass = function () { function defineProperties(target, props) { for
24 28
 
25 29
 require("antd/es/modal/style/css");
26 30
 
31
+require("antd/es/spin/style/css");
32
+
27 33
 require("antd/es/upload/style/css");
28 34
 
29 35
 require("antd/es/icon/style/css");
@@ -97,12 +103,15 @@ var App = function (_React$Component) {
97 103
 
98 104
     _this.state = {
99 105
       previewVisible: false,
100
-      previewImage: ""
106
+      previewImage: "",
107
+      loading: false
101 108
     };
102 109
     _this.handleCancel = _this.handleCancel.bind(_this);
103 110
     _this.handlePreview = _this.handlePreview.bind(_this);
104 111
     _this.handleChange = _this.handleChange.bind(_this);
105 112
     _this.customRequest = _this.customRequest.bind(_this);
113
+    _this.handleCloseClick = _this.handleCloseClick.bind(_this);
114
+    _this.onImgLoad = _this.onImgLoad.bind(_this);
106 115
     return _this;
107 116
   }
108 117
 
@@ -111,6 +120,13 @@ var App = function (_React$Component) {
111 120
     value: function componentDidMount() {
112 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 131
     key: "handleCancel",
116 132
     value: function handleCancel() {
@@ -160,9 +176,18 @@ var App = function (_React$Component) {
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 187
     key: "render",
165 188
     value: function render() {
189
+      var _this3 = this;
190
+
166 191
       var _state = this.state,
167 192
           previewVisible = _state.previewVisible,
168 193
           previewImage = _state.previewImage;
@@ -190,6 +215,7 @@ var App = function (_React$Component) {
190 215
             accept: "image/jpg,image/jpeg,image/png,image/bmp",
191 216
             multiple: multiple,
192 217
             listType: "picture-card",
218
+            showUploadList: { showPreviewIcon: true, showRemoveIcon: false },
193 219
             fileList: fileList,
194 220
             customRequest: this.customRequest,
195 221
             onPreview: this.handlePreview,
@@ -197,6 +223,17 @@ var App = function (_React$Component) {
197 223
           },
198 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 237
         _react2.default.createElement(
201 238
           _modal2.default,
202 239
           {
@@ -205,7 +242,17 @@ var App = function (_React$Component) {
205 242
             footer: null,
206 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
La diferencia del archivo ha sido suprimido porque es demasiado grande
Ver fichero


+ 1
- 1
lib/components/Editor/index.js.map
La diferencia del archivo ha sido suprimido porque es demasiado grande
Ver fichero


+ 3
- 3
lib/version.json Ver fichero

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

BIN
src/assert/close.png Ver fichero


+ 24
- 1
src/components/ContentItem/index.css Ver fichero

@@ -13,7 +13,7 @@
13 13
 .comment-item-right {
14 14
   display: inline-block;
15 15
   width: 90%;
16
-  margin-left: 10px;
16
+  margin-left: 20px;
17 17
   margin-bottom: 20px;
18 18
 }
19 19
 .comment-item-avatar {
@@ -24,8 +24,12 @@
24 24
   background-size: cover;
25 25
   cursor: pointer;
26 26
 }
27
+.comment-item-name {
28
+  font-size: 16px;
29
+}
27 30
 .comment-item-content {
28 31
   margin: 10px 0;
32
+  font-size: 16px;
29 33
   word-break: break-all;
30 34
 }
31 35
 
@@ -53,6 +57,7 @@
53 57
 }
54 58
 
55 59
 .comment-item-image {
60
+  margin-left: -5px;
56 61
   width: 400px;
57 62
   max-width: 100%;
58 63
 }
@@ -121,3 +126,21 @@
121 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 Ver fichero

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

+ 22
- 0
src/components/Editor/Upload.css Ver fichero

@@ -12,3 +12,25 @@
12 12
   top: -10px;
13 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 Ver fichero

@@ -1,5 +1,5 @@
1 1
 import React from "react";
2
-import { Upload, Icon, Modal, message } from "antd";
2
+import { Upload, Icon, Modal, message, Spin } from "antd";
3 3
 import dayjs from "dayjs";
4 4
 import shortid from "shortid";
5 5
 import intl from "react-intl-universal";
@@ -47,18 +47,27 @@ class App extends React.Component {
47 47
     super(props);
48 48
     this.state = {
49 49
       previewVisible: false,
50
-      previewImage: ""
50
+      previewImage: "",
51
+      loading: false
51 52
     };
52 53
     this.handleCancel = this.handleCancel.bind(this);
53 54
     this.handlePreview = this.handlePreview.bind(this);
54 55
     this.handleChange = this.handleChange.bind(this);
55 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 61
   componentDidMount() {
59 62
     this.props.app.sOssSts();
60 63
   }
61 64
 
65
+  onImgLoad() {
66
+    this.setState({
67
+      loading: false
68
+    });
69
+  }
70
+
62 71
   handleCancel() {
63 72
     this.setState({ previewVisible: false });
64 73
   }
@@ -101,6 +110,12 @@ class App extends React.Component {
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 119
   render() {
105 120
     const { previewVisible, previewImage } = this.state;
106 121
     const { fileList, maxUpload, multiple } = this.props;
@@ -116,6 +131,7 @@ class App extends React.Component {
116 131
           accept="image/jpg,image/jpeg,image/png,image/bmp"
117 132
           multiple={multiple}
118 133
           listType="picture-card"
134
+          showUploadList={{ showPreviewIcon: true, showRemoveIcon: false }}
119 135
           fileList={fileList}
120 136
           customRequest={this.customRequest}
121 137
           onPreview={this.handlePreview}
@@ -123,13 +139,34 @@ class App extends React.Component {
123 139
         >
124 140
           {fileList.length >= maxUpload ? null : uploadButton}
125 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 155
         <Modal
127 156
           className="upload-img-preview"
128 157
           visible={previewVisible}
129 158
           footer={null}
130 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 170
         </Modal>
134 171
       </div>
135 172
     );