Skip to content

Commit af8c82f

Browse files
wangfupeng1988wangfupeng1988
committed
优化 drpolist panel 的样式
1 parent 790574f commit af8c82f

File tree

24 files changed

+508
-260
lines changed

24 files changed

+508
-260
lines changed

‎ISSUE.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@
33
- 删除掉`./release`之后，执行`npm run release`会报错，原因是`fonts`文件没拷贝全，就要去替换`css`中的字体文件为`base64`格式，导致找不到文件。
44
- 针对编辑区域的`max-height`和`min-height`做一些处理，而且和全屏还不能通用
55
- 先点击'B'再输入内容这种形式，前期先支持 webkit 和 IE，火狐的支持后面再加上
6-
- Panel 的样式需要优化，现在太丑
6+
- Panel 在右上角增加一个“关闭”按钮

‎example/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@
2626
<h1>标题1</h1>
2727
<h2>标题2</h2>
2828
<p>请输入内容</p>
29+
<p><img src="https://b3.hoopchina.com.cn/images/logo2013/v1/hp_logo_nba.png"/></p>
30+
<p>请输入内容</p>
2931
<pre>
3032
<code>
3133
// 插入 elem

‎release/wangEditor.css

Lines changed: 71 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -34,24 +34,30 @@
3434
border-bottom: 1px solid #f1f1f1;
3535
font-size: 13px;
3636
}
37-
.w-e-toolbar .w-e-droplist ul {
37+
.w-e-toolbar .w-e-droplist ul.w-e-list {
3838
list-style: none;
3939
line-height: 1;
4040
}
41-
.w-e-toolbar .w-e-droplist li {
41+
.w-e-toolbar .w-e-droplist ul.w-e-list li.w-e-item {
4242
color: #333;
4343
padding: 5px 0;
4444
}
45-
.w-e-toolbar .w-e-droplist li:hover {
45+
.w-e-toolbar .w-e-droplist ul.w-e-list li.w-e-item:hover {
4646
background-color: #f1f1f1;
4747
}
48-
.w-e-toolbar .w-e-droplist li .w-e-inline-block {
48+
.w-e-toolbar .w-e-droplist ul.w-e-block {
49+
list-style: none;
50+
text-align: left;
51+
padding: 5px;
52+
}
53+
.w-e-toolbar .w-e-droplist ul.w-e-block li.w-e-item {
4954
display: inline-block;
5055
*display: inline;
5156
*zoom: 1;
52-
width: 90%;
53-
height: 14px;
54-
border: 1px solid #f1f1f1;
57+
padding: 3px 5px;
58+
}
59+
.w-e-toolbar .w-e-droplist ul.w-e-block li.w-e-item:hover {
60+
background-color: #f1f1f1;
5561
}
5662

5763
@font-face {
@@ -181,35 +187,24 @@
181187
}
182188

183189
.w-e-text-container .w-e-panel-container {
184-
font-size: 100px;
185190
position: absolute;
186191
top: 0;
187192
left: 50%;
188193
border: 1px solid #ccc;
189194
border-top: 0;
190195
box-shadow: 1px 1px 2px #ccc;
191-
background-color: #fff;
192196
color: #333;
193-
}
194-
.w-e-text-container .w-e-panel-container textarea {
195-
width: 100%;
196-
border: 1px solid #ccc;
197-
}
198-
.w-e-text-container .w-e-panel-container textarea:focus {
199-
border-color: #1e88e5;
200-
}
201-
.w-e-text-container .w-e-panel-container input[type=text]:focus {
202-
border: 1px solid #1e88e5;
197+
background-color: #fff;
198+
/* 为 emotion panel 定制的样式 */
203199
}
204200
.w-e-text-container .w-e-panel-container .w-e-panel-tab-title {
205201
list-style: none;
206202
display: -webkit-box;
207203
display: -ms-flexbox;
208204
display: flex;
209-
font-size: 0.16em;
210-
background-color: #f1f1f1;
211-
border-bottom: 1px solid #ccc;
212-
padding: 2px 10px 0 10px;
205+
font-size: 14px;
206+
margin: 2px 10px 0 10px;
207+
border-bottom: 1px solid #f1f1f1;
213208
}
214209
.w-e-text-container .w-e-panel-container .w-e-panel-tab-title .w-e-item {
215210
padding: 3px 5px;
@@ -222,69 +217,85 @@
222217
.w-e-text-container .w-e-panel-container .w-e-panel-tab-title .w-e-active {
223218
color: #333;
224219
border-bottom: 1px solid #333;
220+
cursor: default;
221+
font-weight: 700;
225222
}
226223
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content {
227-
padding: 10px 15px 0 15px;
228-
font-size: 0.16em;
224+
padding: 10px 15px 10px 15px;
225+
font-size: 16px;
226+
/* 输入框的样式 */
227+
/* 按钮的样式 */
228+
}
229+
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content input:focus,
230+
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content textarea:focus,
231+
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content button:focus {
232+
outline: none;
229233
}
230-
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content table.form-table {
234+
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content textarea {
231235
width: 100%;
232-
border: 0;
236+
border: 1px solid #ccc;
237+
padding: 5px;
233238
}
234-
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content table.form-table td {
235-
padding: 5px 0;
239+
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content textarea:focus {
240+
border-color: #1e88e5;
236241
}
237-
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content table.form-table td input[type=text] {
238-
width: 100%;
239-
border: 0;
242+
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content input[type=text] {
243+
border: none;
240244
border-bottom: 1px solid #ccc;
241-
font-size: 15px;
245+
font-size: 14px;
246+
height: 20px;
247+
color: #333;
248+
padding: 10px 5px;
249+
text-align: left;
250+
}
251+
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content input[type=text].small {
252+
width: 30px;
253+
text-align: center;
242254
}
243-
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content table.form-table td input[type=text]:focus {
244-
border-bottom-color: #1e88e5;
255+
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content input[type=text].block {
256+
display: block;
257+
width: 100%;
258+
margin: 10px 0;
245259
}
246-
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container {
247-
margin-top: 10px;
260+
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content input[type=text]:focus {
261+
border-bottom: 2px solid #1e88e5;
248262
}
249263
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button {
250-
color: #999;
251-
border: 1px solid #ccc;
252264
font-size: 14px;
265+
color: #1e88e5;
266+
border: none;
267+
padding: 10px;
253268
background-color: #fff;
254-
padding: 2px 5px;
255269
cursor: pointer;
256-
}
257-
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button:hover {
258-
background-color: #f1f1f1;
259-
}
260-
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.default {
261-
color: #1e88e5;
262-
border-color: #1e88e5;
263-
}
264-
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.red {
265-
color: red;
266-
border-color: red;
270+
border-radius: 3px;
267271
}
268272
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.left {
269273
float: left;
274+
margin-right: 10px;
270275
}
271276
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.right {
272277
float: right;
278+
margin-left: 10px;
279+
}
280+
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.gray {
281+
color: #999;
282+
}
283+
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.red {
284+
color: #c24f4a;
285+
}
286+
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button:hover {
287+
background-color: #f1f1f1;
288+
}
289+
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container:after {
290+
content: "";
291+
display: table;
292+
clear: both;
273293
}
274294
.w-e-text-container .w-e-panel-container .w-e-emoticon-container .w-e-item {
275295
cursor: pointer;
276296
font-size: 18px;
277297
padding: 0 3px;
278298
}
279-
.w-e-text-container .w-e-panel-container input:focus {
280-
outline: none;
281-
}
282-
.w-e-text-container .w-e-panel-container textarea:focus {
283-
outline: none;
284-
}
285-
.w-e-text-container .w-e-panel-container button:focus {
286-
outline: none;
287-
}
288299

289300
.w-e-text-container {
290301
position: relative;

0 commit comments

Comments
 (0)