r104762 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r104761‎ | r104762 | r104763 >
Date:22:15, 30 November 2011
Author:tparscal
Status:deferred
Tags:
Comment:
Moved more styles around
Modified paths:
  • /trunk/extensions/VisualEditor/VisualEditor.php (modified) (history)
  • /trunk/extensions/VisualEditor/demo/index.html (modified) (history)
  • /trunk/extensions/VisualEditor/modules/es/styles/es.ContentView.css (added) (history)
  • /trunk/extensions/VisualEditor/modules/es/styles/es.ContextView.css (modified) (history)
  • /trunk/extensions/VisualEditor/modules/es/styles/es.DocumentView.css (added) (history)
  • /trunk/extensions/VisualEditor/modules/es/styles/es.Surface.css (deleted) (history)
  • /trunk/extensions/VisualEditor/modules/es/styles/es.SurfaceView.css (added) (history)

Diff [purge]

Index: trunk/extensions/VisualEditor/VisualEditor.php
——@@ -109,8 +109,10 @@
110110 'es/tools/es.ClearButtonTool.js'
111111 ),
112112 'styles' => array(
113 - 'es/styles/es.Surface.css',
 113+ 'es/styles/es.SurfaceView.css',
114114 'es/styles/es.ContextView.css',
 115+ 'es/styles/es.ContentView.css',
 116+ 'es/styles/es.DocumentView.css',
115117 ),
116118 'dependencies' => array(
117119 'jquery',
Index: trunk/extensions/VisualEditor/demo/index.html
——@@ -3,8 +3,10 @@
44 <html>
55 <head>
66 <title>EditSurface Demo</title>
7 - <link rel="stylesheet" href="../modules/es/styles/es.Surface.css">
 7+ <link rel="stylesheet" href="../modules/es/styles/es.SurfaceView.css">
88 <link rel="stylesheet" href="../modules/es/styles/es.ContextView.css">
 9+ <link rel="stylesheet" href="../modules/es/styles/es.ContentView.css">
 10+ <link rel="stylesheet" href="../modules/es/styles/es.DocumentView.css">
911 <link rel="stylesheet" href="../modules/sandbox/sandbox.css">
1012 <style>
1113 body {
Index: trunk/extensions/VisualEditor/modules/es/styles/es.Surface.css
——@@ -1,279 +0,0 @@
2 -.es-surfaceView {
3 - overflow: hidden;
4 - font-size: 1em; /* to look more like MediaWiki use: 0.8em */;
5 - margin-left: -1em;
6 - margin-right: -1em;
7 -}
8 -
9 -.es-surfaceView-textarea {
10 - position: absolute;
11 - z-index: -1;
12 - opacity: 0;
13 - color: white;
14 - background-color: white;
15 - border: none;
16 - padding: 0;
17 - margin: 0;
18 - width: 1px;
19 -}
20 -
21 -.es-surfaceView-textarea:focus {
22 - outline: none;
23 -}
24 -
25 -.es-surfaceView-cursor {
26 - position: absolute;
27 - background-color: black;
28 - width: 1px;
29 - display: none;
30 -}
31 -
32 -.es-documentView {
33 - cursor: text;
34 - margin-top: 1em;
35 - overflow: hidden;
36 - -webkit-user-select: none;
37 -}
38 -
39 -.es-contentView {
40 - position: relative;
41 - z-index: 1;
42 -}
43 -
44 -.es-headingView,
45 -.es-tableView,
46 -.es-listView,
47 -.es-preView,
48 -.es-paragraphView {
49 - margin: 1em;
50 - margin-top: 0;
51 - position: relative;
52 - min-height: 1.5em;
53 -}
54 -
55 -.es-listItemView > .es-paragraphView {
56 - margin-left: 0;
57 - margin-right: 0;
58 -}
59 -.es-listItemView > .es-viewBranchNode-firstChild {
60 - margin: 0;
61 -}
62 -
63 -.es-preView {
64 - padding: 1em;
65 - border: 1px dashed #2F6FAB;
66 -}
67 -.es-preView > * {
68 - font-family: monospace,"Courier New";
69 -}
70 -
71 -.es-headingView-level1,
72 -.es-headingView-level2 {
73 - border-bottom: 1px solid #AAA;
74 -}
75 -
76 -.es-headingView-level1 > * {
77 - font-size: 188%;
78 - font-weight: normal;
79 -}
80 -
81 -.es-headingView-level2 > * {
82 - font-size: 150%;
83 - font-weight: normal;
84 -}
85 -
86 -.es-headingView-level3 > * {
87 - font-size: 132%;
88 - font-weight: bold;
89 -}
90 -
91 -.es-headingView-level4 > * {
92 - font-size: 116%;
93 - font-weight: bold;
94 -}
95 -
96 -.es-headingView-level5 > * {
97 - font-size: 100%;
98 - font-weight: bold;
99 -}
100 -
101 -.es-headingView-level6 > * {
102 - font-size: 80%;
103 - font-weight: bold;
104 -}
105 -
106 -.es-listItemView {
107 - position: relative;
108 -}
109 -
110 -.es-listItemView-bullet {
111 - padding-left: 1.2em;
112 -}
113 -
114 -.es-listItemView-number {
115 - padding-left: 3.2em;
116 -}
117 -
118 -.es-listItemView-icon {
119 - position: absolute;
120 - right: 100%;
121 - height: 1.5em;
122 - line-height: 1.5em;
123 -}
124 -
125 -.es-listItemView-bullet .es-listItemView-icon {
126 - background-image: url(../images/bullet-icon.png);
127 - background-position: left 0.6em;
128 - background-repeat: no-repeat;
129 - width: 5px;
130 - margin-right: -0.5em;
131 -}
132 -
133 -.es-listItemView-number .es-listItemView-icon {
134 - margin-right: -2.8em;
135 -}
136 -
137 -.es-listItemView-term {
138 - font-weight: bold;
139 -}
140 -
141 -.es-listItemView-definition .es-contentView {
142 - margin-left: 2em;
143 -}
144 -
145 -.es-listItemView-level0 {
146 - margin-left: 0;
147 -}
148 -
149 -.es-listItemView-level1 {
150 - margin-left: 2em;
151 -}
152 -
153 -.es-listItemView-level2 {
154 - margin-left: 4em;
155 -}
156 -
157 -.es-listItemView-level3 {
158 - margin-left: 6em;
159 -}
160 -
161 -.es-listItemView-level4 {
162 - margin-left: 8em;
163 -}
164 -
165 -.es-listItemView-level5 {
166 - margin-left: 10em;
167 -}
168 -
169 -.es-listItemView-level6 {
170 - margin-left: 12em;
171 -}
172 -
173 -.es-listItemView-level1.es-listItemView-number {
174 - margin-left: 4em;
175 -}
176 -
177 -.es-listItemView-level2.es-listItemView-number {
178 - margin-left: 8em;
179 -}
180 -
181 -.es-listItemView-level3.es-listItemView-number {
182 - margin-left: 12em;
183 -}
184 -
185 -.es-listItemView-level4.es-listItemView-number {
186 - margin-left: 16em;
187 -}
188 -
189 -.es-listItemView-level5.es-listItemView-number {
190 - margin-left: 18em;
191 -}
192 -
193 -.es-listItemView-level6.es-listItemView-number {
194 - margin-left: 22em;
195 -}
196 -
197 -.es-contentView-line,
198 -.es-contentView-ruler {
199 - line-height: 1.5em;
200 - cursor: text;
201 - white-space: nowrap;
202 - color: #000000;
203 -}
204 -
205 -.es-contentView-ruler {
206 - position: absolute;
207 - top: 0;
208 - left: 0;
209 - display: inline-block;
210 - z-index: -1000;
211 -}
212 -
213 -.es-contentView-line.empty {
214 - display: block;
215 - width: 0px;
216 -}
217 -
218 -.es-contentView-whitespace {
219 - color: #ffffff;
220 -}
221 -
222 -.es-contentView-range {
223 - display: none;
224 - position: absolute;
225 - background-color: #b3d6f6;
226 - cursor: text;
227 - z-index: -1;
228 -}
229 -
230 -.es-contentView-format-object {
231 - background-color: rgba(0,0,0,0.05);
232 - border-radius: 0.25em;
233 - margin: 1px 0 1px 1px;
234 - padding: 0.25em 0;
235 - cursor: default;
236 -}
237 -
238 -.es-contentView-format-object * {
239 - cursor: default !important;
240 -}
241 -
242 -.es-contentView-format-object a:link,
243 -.es-contentView-format-object a:visited,
244 -.es-contentView-format-object a:active {
245 - color: #0645AD;
246 - text-decoration: none;
247 -}
248 -
249 -.es-contentView-format-textStyle-italic,
250 -.es-contentView-format-textStyle-emphasize {
251 - font-style: italic;
252 -}
253 -
254 -.es-contentView-format-textStyle-bold,
255 -.es-contentView-format-textStyle-strong {
256 - font-weight: bold;
257 -}
258 -
259 -.es-contentView-format-link {
260 - color: #0645AD;
261 - text-decoration: underline;
262 -}
263 -
264 -.es-contentView-format-textStyle-big {
265 - font-size: 1.2em;
266 -}
267 -
268 -.es-contentView-format-textStyle-small,
269 -.es-contentView-format-textStyle-subScript,
270 -.es-contentView-format-textStyle-superScript {
271 - font-size: .8em;
272 -}
273 -
274 -.es-contentView-format-textStyle-subScript {
275 - vertical-align: sub;
276 -}
277 -
278 -.es-contentView-format-textStyle-superScript {
279 - vertical-align: super;
280 -}
Index: trunk/extensions/VisualEditor/modules/es/styles/es.SurfaceView.css
——@@ -0,0 +1,29 @@
 2+.es-surfaceView {
 3+ overflow: hidden;
 4+ font-size: 1em; /* to look more like MediaWiki use: 0.8em */;
 5+ margin-left: -1em;
 6+ margin-right: -1em;
 7+}
 8+
 9+.es-surfaceView-textarea {
 10+ position: absolute;
 11+ z-index: -1;
 12+ opacity: 0;
 13+ color: white;
 14+ background-color: white;
 15+ border: none;
 16+ padding: 0;
 17+ margin: 0;
 18+ width: 1px;
 19+}
 20+
 21+.es-surfaceView-textarea:focus {
 22+ outline: none;
 23+}
 24+
 25+.es-surfaceView-cursor {
 26+ position: absolute;
 27+ background-color: black;
 28+ width: 1px;
 29+ display: none;
 30+}
Index: trunk/extensions/VisualEditor/modules/es/styles/es.ContentView.css
——@@ -0,0 +1,89 @@
 2+.es-contentView {
 3+ position: relative;
 4+ z-index: 1;
 5+}
 6+
 7+.es-contentView-line,
 8+.es-contentView-ruler {
 9+ line-height: 1.5em;
 10+ cursor: text;
 11+ white-space: nowrap;
 12+ color: #000000;
 13+}
 14+
 15+.es-contentView-ruler {
 16+ position: absolute;
 17+ top: 0;
 18+ left: 0;
 19+ display: inline-block;
 20+ z-index: -1000;
 21+}
 22+
 23+.es-contentView-line.empty {
 24+ display: block;
 25+ width: 0px;
 26+}
 27+
 28+.es-contentView-whitespace {
 29+ color: #ffffff;
 30+}
 31+
 32+.es-contentView-range {
 33+ display: none;
 34+ position: absolute;
 35+ background-color: #b3d6f6;
 36+ cursor: text;
 37+ z-index: -1;
 38+}
 39+
 40+.es-contentView-format-object {
 41+ background-color: rgba(0,0,0,0.05);
 42+ border-radius: 0.25em;
 43+ margin: 1px 0 1px 1px;
 44+ padding: 0.25em 0;
 45+ cursor: default;
 46+}
 47+
 48+.es-contentView-format-object * {
 49+ cursor: default !important;
 50+}
 51+
 52+.es-contentView-format-object a:link,
 53+.es-contentView-format-object a:visited,
 54+.es-contentView-format-object a:active {
 55+ color: #0645AD;
 56+ text-decoration: none;
 57+}
 58+
 59+.es-contentView-format-textStyle-italic,
 60+.es-contentView-format-textStyle-emphasize {
 61+ font-style: italic;
 62+}
 63+
 64+.es-contentView-format-textStyle-bold,
 65+.es-contentView-format-textStyle-strong {
 66+ font-weight: bold;
 67+}
 68+
 69+.es-contentView-format-link {
 70+ color: #0645AD;
 71+ text-decoration: underline;
 72+}
 73+
 74+.es-contentView-format-textStyle-big {
 75+ font-size: 1.2em;
 76+}
 77+
 78+.es-contentView-format-textStyle-small,
 79+.es-contentView-format-textStyle-subScript,
 80+.es-contentView-format-textStyle-superScript {
 81+ font-size: .8em;
 82+}
 83+
 84+.es-contentView-format-textStyle-subScript {
 85+ vertical-align: sub;
 86+}
 87+
 88+.es-contentView-format-textStyle-superScript {
 89+ vertical-align: super;
 90+}
Index: trunk/extensions/VisualEditor/modules/es/styles/es.DocumentView.css
——@@ -0,0 +1,159 @@
 2+.es-documentView {
 3+ cursor: text;
 4+ margin-top: 1em;
 5+ overflow: hidden;
 6+ -webkit-user-select: none;
 7+}
 8+
 9+.es-headingView,
 10+.es-tableView,
 11+.es-listView,
 12+.es-preView,
 13+.es-paragraphView {
 14+ margin: 1em;
 15+ margin-top: 0;
 16+ position: relative;
 17+ min-height: 1.5em;
 18+}
 19+
 20+.es-listItemView > .es-paragraphView {
 21+ margin-left: 0;
 22+ margin-right: 0;
 23+}
 24+.es-listItemView > .es-viewBranchNode-firstChild {
 25+ margin: 0;
 26+}
 27+
 28+.es-preView {
 29+ padding: 1em;
 30+ border: 1px dashed #2F6FAB;
 31+}
 32+.es-preView > * {
 33+ font-family: monospace,"Courier New";
 34+}
 35+
 36+.es-headingView-level1,
 37+.es-headingView-level2 {
 38+ border-bottom: 1px solid #AAA;
 39+}
 40+
 41+.es-headingView-level1 > * {
 42+ font-size: 188%;
 43+ font-weight: normal;
 44+}
 45+
 46+.es-headingView-level2 > * {
 47+ font-size: 150%;
 48+ font-weight: normal;
 49+}
 50+
 51+.es-headingView-level3 > * {
 52+ font-size: 132%;
 53+ font-weight: bold;
 54+}
 55+
 56+.es-headingView-level4 > * {
 57+ font-size: 116%;
 58+ font-weight: bold;
 59+}
 60+
 61+.es-headingView-level5 > * {
 62+ font-size: 100%;
 63+ font-weight: bold;
 64+}
 65+
 66+.es-headingView-level6 > * {
 67+ font-size: 80%;
 68+ font-weight: bold;
 69+}
 70+
 71+.es-listItemView {
 72+ position: relative;
 73+}
 74+
 75+.es-listItemView-bullet {
 76+ padding-left: 1.2em;
 77+}
 78+
 79+.es-listItemView-number {
 80+ padding-left: 3.2em;
 81+}
 82+
 83+.es-listItemView-icon {
 84+ position: absolute;
 85+ right: 100%;
 86+ height: 1.5em;
 87+ line-height: 1.5em;
 88+}
 89+
 90+.es-listItemView-bullet .es-listItemView-icon {
 91+ background-image: url(../images/bullet-icon.png);
 92+ background-position: left 0.6em;
 93+ background-repeat: no-repeat;
 94+ width: 5px;
 95+ margin-right: -0.5em;
 96+}
 97+
 98+.es-listItemView-number .es-listItemView-icon {
 99+ margin-right: -2.8em;
 100+}
 101+
 102+.es-listItemView-term {
 103+ font-weight: bold;
 104+}
 105+
 106+.es-listItemView-definition .es-contentView {
 107+ margin-left: 2em;
 108+}
 109+
 110+.es-listItemView-level0 {
 111+ margin-left: 0;
 112+}
 113+
 114+.es-listItemView-level1 {
 115+ margin-left: 2em;
 116+}
 117+
 118+.es-listItemView-level2 {
 119+ margin-left: 4em;
 120+}
 121+
 122+.es-listItemView-level3 {
 123+ margin-left: 6em;
 124+}
 125+
 126+.es-listItemView-level4 {
 127+ margin-left: 8em;
 128+}
 129+
 130+.es-listItemView-level5 {
 131+ margin-left: 10em;
 132+}
 133+
 134+.es-listItemView-level6 {
 135+ margin-left: 12em;
 136+}
 137+
 138+.es-listItemView-level1.es-listItemView-number {
 139+ margin-left: 4em;
 140+}
 141+
 142+.es-listItemView-level2.es-listItemView-number {
 143+ margin-left: 8em;
 144+}
 145+
 146+.es-listItemView-level3.es-listItemView-number {
 147+ margin-left: 12em;
 148+}
 149+
 150+.es-listItemView-level4.es-listItemView-number {
 151+ margin-left: 16em;
 152+}
 153+
 154+.es-listItemView-level5.es-listItemView-number {
 155+ margin-left: 18em;
 156+}
 157+
 158+.es-listItemView-level6.es-listItemView-number {
 159+ margin-left: 22em;
 160+}
Index: trunk/extensions/VisualEditor/modules/es/styles/es.ContextView.css
——@@ -2,6 +2,7 @@
33 position: absolute;
44 z-index: 2;
55 }
 6+
67 .es-contextView-icon {
78 position: absolute;
89 background-repeat: no-repeat;
——@@ -19,18 +20,22 @@
2021 -moz-box-shadow: 0 0.25em 1em 0 rgba(0,0,0,0.25);
2122 box-shadow: 0 0.25em 1em 0 rgba(0,0,0,0.25);
2223 }
 24+
2325 .es-contextView-position-start .es-contextView-icon {
2426 top: -12px;
2527 left: -8px;
2628 }
 29+
2730 .es-contextView-position-end .es-contextView-icon {
2831 top: -6px;
2932 left: -8px;
3033 }
 34+
3135 .es-contextView-position-above .es-contextView-icon {
3236 background-image: url(../images/arrow-up.png);
3337 background-position: 4px 4px;
3438 }
 39+
3540 .es-contextView-position-below .es-contextView-icon {
3641 background-image: url(../images/arrow-down.png);
3742 background-position: 4px 5px;
——@@ -39,6 +44,7 @@
4045 .es-contextView-position-below .es-contextView-icon:hover {
4146 border-color: #b3d6f6;
4247 }
 48+
4349 .es-contextView-menu {
4450 display: none;
4551 position: absolute;
——@@ -53,27 +59,34 @@
5460 box-shadow: 0 0.25em 1em 0 rgba(0,0,0,0.25);
5561 padding: 0.33em 0;
5662 }
 63+
5764 .es-contextView-position-above .es-contextView-menu {
5865 bottom: 7px;
5966 }
 67+
6068 .es-contextView-position-below .es-contextView-menu {
6169 top: 8px;
6270 }
 71+
6372 .es-contextView-position-left .es-contextView-menu {
6473 left: -1px;
6574 }
 75+
6676 .es-contextView-position-right .es-contextView-menu {
6777 right: -1px;
6878 }
 79+
6980 .es-contextView-menuItem {
7081 padding: 0.33em 1em;
7182 cursor: pointer;
7283 white-space: nowrap;
7384 }
 85+
7486 .es-contextView-menuSection {
7587 padding: 0.33em 0.66em;
7688 white-space: nowrap;
7789 }
 90+
7891 .es-contextView-menuButton {
7992 display: inline-block;
8093 width: 1em;
——@@ -88,25 +101,32 @@
89102 background-position: no-repeat;
90103 cursor: pointer;
91104 }
 105+
92106 .es-contextView-menuButton-bold {
93107 background-image: url(../images/bold.png);
94108 }
 109+
95110 .es-contextView-menuButton-italic {
96111 background-image: url(../images/italic.png);
97112 }
 113+
98114 .es-contextView-menuButton-clear {
99115 background-image: url(../images/clear.png);
100116 }
 117+
101118 .es-contextView-menuButton:hover {
102119 border-color: #b3d6f6;
103120 }
 121+
104122 .es-contextView-menuButton:active {
105123 background-color: #b3d6f6;
106124 }
 125+
107126 .es-contextView-menuItem-break {
108127 margin: 0.33em 0;
109128 border-top: solid 1px #dddddd;
110129 }
 130+
111131 .es-contextView-menuItem:hover {
112132 background-color: #b3d6f6;
113133 }

Status & tagging log