Commit 7c019a7130c4f3b4c10157a2169a6db7909d9022

Authored by AntonioTerceiro
1 parent 8a6c0f8a

ActionItem18: more work to adjust comatose to our application



git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@386 3f533792-8f58-4932-b0fe-aaf55b0a4547
public/designs/templates/default/stylesheets/style.css
@@ -42,9 +42,10 @@ height: 135px; @@ -42,9 +42,10 @@ height: 135px;
42 42
43 #boxes { 43 #boxes {
44 position: relative; 44 position: relative;
45 - width: 800px; 45 + width: 760px;
46 left: 50%; 46 left: 50%;
47 margin-left: -400px; 47 margin-left: -400px;
  48 + padding: 1em;
48 } 49 }
49 50
50 #box_3 { 51 #box_3 {
@@ -135,3 +136,34 @@ height: 135px; @@ -135,3 +136,34 @@ height: 135px;
135 color: #ffffff; 136 color: #ffffff;
136 } 137 }
137 138
  139 +div#notice {
  140 + z-index: 10000;
  141 + position: absolute;
  142 + top: 100px;
  143 + left: 50%;
  144 + margin-left: -200px;
  145 + width: 400px;
  146 + border: 1px solid black;
  147 + background: #efefef;
  148 + padding: 0.5em;
  149 +}
  150 +
  151 +div#notice .button {
  152 + text-align: center;
  153 + margin-top: 1em;
  154 + margin-bottom: 0.25em;
  155 +}
  156 +
  157 +div#notice .button a {
  158 + border: 1px solid gray;
  159 + background: #ddd;
  160 + color: black;
  161 + padding: 4px;
  162 + padding-left: 28px;
  163 + background-image: url(../../../icons/default/cancel.png);
  164 + background-position: top left;
  165 + background-repeat: no-repeat;
  166 +}
  167 +div#notice .button a:hover {
  168 + background-color: #ffd;
  169 +}
public/javascripts/comatose_admin.js
@@ -66,15 +66,15 @@ var ComatoseList = { @@ -66,15 +66,15 @@ var ComatoseList = {
66 } 66 }
67 }, 67 },
68 68
69 - toggle_reorder: function(node, anc, id) { 69 + toggle_reorder: function(node, anc, id, reorder_text, finished_text) {
70 if( $(node).hasClassName('do-reorder') ) { 70 if( $(node).hasClassName('do-reorder') ) {
71 $(node).removeClassName( 'do-reorder' ); 71 $(node).removeClassName( 'do-reorder' );
72 $(anc).removeClassName('reordering'); 72 $(anc).removeClassName('reordering');
73 - $(anc).innerHTML = "reorder children"; 73 + $(anc).innerHTML = reorder_text;
74 } else { 74 } else {
75 $(node).addClassName( 'do-reorder' ); 75 $(node).addClassName( 'do-reorder' );
76 $(anc).addClassName('reordering'); 76 $(anc).addClassName('reordering');
77 - $(anc).innerHTML = "finished reordering"; 77 + $(anc).innerHTML = finished_text;
78 // Make sure the children are visible... 78 // Make sure the children are visible...
79 ComatoseList.expand_node(id); 79 ComatoseList.expand_node(id);
80 } 80 }
@@ -149,8 +149,8 @@ var ComatoseEditForm = { @@ -149,8 +149,8 @@ var ComatoseEditForm = {
149 this.last_title = slug.value; 149 this.last_title = slug.value;
150 }, 150 },
151 // Todo: Make the meta fields remember their visibility? 151 // Todo: Make the meta fields remember their visibility?
152 - toggle_extra_fields : function(anchor) {  
153 - if(anchor.innerHTML == "More...") { 152 + toggle_extra_fields : function(anchor, more_label, less_label) {
  153 + if(anchor.innerHTML == more_label) {
154 Show.these( 154 Show.these(
155 'slug_row', 155 'slug_row',
156 'keywords_row', 156 'keywords_row',
@@ -158,7 +158,7 @@ var ComatoseEditForm = { @@ -158,7 +158,7 @@ var ComatoseEditForm = {
158 'filter_row', 158 'filter_row',
159 'created_row' 159 'created_row'
160 ); 160 );
161 - anchor.innerHTML = 'Less...'; 161 + anchor.innerHTML = less_label;
162 } else { 162 } else {
163 Hide.these( 163 Hide.these(
164 'slug_row', 164 'slug_row',
@@ -167,15 +167,15 @@ var ComatoseEditForm = { @@ -167,15 +167,15 @@ var ComatoseEditForm = {
167 'filter_row', 167 'filter_row',
168 'created_row' 168 'created_row'
169 ); 169 );
170 - anchor.innerHTML = 'More...'; 170 + anchor.innerHTML = more_label;
171 } 171 }
172 }, 172 },
173 // Uses server to create preview of content... 173 // Uses server to create preview of content...
174 - preview_content : function(preview_url) { 174 + preview_content : function(preview_url, preview_label) {
175 $('preview-area').show(); 175 $('preview-area').show();
176 var params = Form.serialize(document.forms[0]); 176 var params = Form.serialize(document.forms[0]);
177 if( params != this.last_preview ) { 177 if( params != this.last_preview ) {
178 - $('preview-panel').innerHTML = "<span style='color:blue;'>Loading Preview...</span>"; 178 + $('preview-panel').innerHTML = "<span style='color:blue;'>" + preview_label + "</span>";
179 new Ajax.Updater( 179 new Ajax.Updater(
180 'preview-panel', 180 'preview-panel',
181 preview_url, 181 preview_url,
@@ -184,11 +184,11 @@ var ComatoseEditForm = { @@ -184,11 +184,11 @@ var ComatoseEditForm = {
184 } 184 }
185 this.last_preview = params; 185 this.last_preview = params;
186 }, 186 },
187 - cancel : function(url) { 187 + cancel : function(url, cancel_warning) {
188 var current_data = Form.serialize(document.forms[0]); 188 var current_data = Form.serialize(document.forms[0]);
189 var data_changed = (this.default_data != current_data) 189 var data_changed = (this.default_data != current_data)
190 if(data_changed) { 190 if(data_changed) {
191 - if( confirm('Changes detected. You will lose all the updates you have made if you proceed...') ) { 191 + if( confirm(cancel_warning) ) {
192 location.href = url; 192 location.href = url;
193 } 193 }
194 } else { 194 } else {
public/stylesheets/comatose_admin.css
1 1
2 -/* Page Listing */  
3 -#content .tree-controller {  
4 - border: 0px;  
5 - cursor: pointer;  
6 -}  
7 -#content .page-list.root {  
8 - clear: both;  
9 - list-style: none;  
10 - margin: 0px;  
11 - padding: 0px;  
12 - margin-top: 10px;  
13 -}  
14 -#content .page-list.collapsed { 2 +/************************************
  3 + * listing stuff
  4 + ************************************/
  5 +#content .handle, #content .do-reorder UL LI .handle {
15 display: none; 6 display: none;
16 } 7 }
17 -#content .page-list {  
18 - /* background: white; */  
19 - clear: both;  
20 - list-style: none;  
21 - border-left: none;  
22 - margin: 0px;  
23 - padding: 0px;  
24 - padding-left: 15px;  
25 - margin-top: 2px;  
26 -}  
27 -#content .page-list LI {  
28 - clear: both;  
29 - padding: 0px;  
30 - margin: 5px 0px;  
31 - padding-top: 2px;  
32 - padding-right: 0px;  
33 - padding-left: 2px;  
34 -}  
35 -#content .page-list .commands {  
36 - font-size: 90%;  
37 - padding-left: 5px;  
38 -}  
39 -#content .page-list .commands A {  
40 - /* color: gray; */  
41 -}  
42 -#content .page-list .commands A.add-page:hover {  
43 - /* color: blue; */  
44 -}  
45 -#content .page-list .commands A.reorder-children:hover {  
46 -/* color: black; */  
47 -}  
48 -#content .page-list .commands A.delete-page:hover {  
49 -/* color: white; */ 8 +#content .do-reorder LI .handle {
  9 + display: inline;
  10 + background: gray;
  11 + color: white;
  12 + padding: 1px 3px;
  13 + cursor: move;
50 } 14 }
51 -#content .page-list .commands A.reordering {  
52 -/* background: navy; */  
53 -/* color: white; */ 15 +
  16 +ul.page-list li {
  17 + list-style: none;
54 } 18 }
55 -#content .page-list .commands A.reordering:hover {  
56 -/* color: white; */ 19 +
  20 +ul.page-list li table,
  21 +ul.page-list li td {
  22 + border: none;
  23 + padding: 3px;
57 } 24 }
58 -#content .page-list A.page {  
59 - text-decoration: none;  
60 -/* color: black; */  
61 - margin-left: 3px;  
62 - display: block; 25 +
  26 +ul.page-list a.page {
  27 + font-weight: bold;
63 } 28 }
64 -#content .page-list A.page:hover {  
65 - /*color: blue;*/  
66 - background: white url(../images/comatose/title-hover-bg.gif) top left repeat-y; 29 +
  30 +ul.page-list a:visited, ul.page-list a:link {
  31 + color: #000;
67 } 32 }
68 -#content .handle, #content .do-reorder UL LI .handle {  
69 - display: none; 33 +
  34 +ul.page-list a:hover {
  35 + background: #aa9;
70 } 36 }
71 37
72 #content .page-list .hover { 38 #content .page-list .hover {
73 -/* background: #F1F0DB; */ 39 + background: #F1F0DB;
  40 +}
  41 +
  42 +#content .page-list .commands A.delete-page:hover {
  43 + color: white;
  44 + background: black;
74 } 45 }
75 #content .page-list .hover-delete { 46 #content .page-list .hover-delete {
76 background: red; 47 background: red;
77 -/* color: #FF8E90; */ 48 + color: #FF8E90;
78 } 49 }
79 #content .page-list .hover-delete A, 50 #content .page-list .hover-delete A,
80 #content .page-list .hover-delete .commands A { 51 #content .page-list .hover-delete .commands A {
81 -/* color: #FF8E90; */ 52 + color: #FF8E90;
82 } 53 }
83 #content .page-list .hover-delete A.page { 54 #content .page-list .hover-delete A.page {
84 -/* color: white; */ 55 + color: white;
85 border-bottom: 0px; 56 border-bottom: 0px;
86 } 57 }
87 #content .page-list .hover-delete UL LI A.page { 58 #content .page-list .hover-delete UL LI A.page {
88 -/* color: red; */ 59 + color: red;
89 border-bottom: 0px; 60 border-bottom: 0px;
90 } 61 }
91 62
92 -#content .do-reorder LI .handle {  
93 - display: inline;  
94 -/* background: gray; */  
95 -/* color: white; */  
96 - padding: 1px 3px;  
97 - cursor: move;  
98 -}  
99 -  
100 -#content .page-list .do-reorder .commands A {  
101 - display: none;  
102 -}  
103 -  
104 -/* Page Form */  
105 -#content .page-form {  
106 - margin-top: 10px;  
107 -}  
108 -#content .page-form LABEL {  
109 - font-weight: bold;  
110 -/* color: #555; */  
111 -}  
112 -#content .page-form .meta-info LABEL {  
113 -/* color: #999 !important; */ 63 +/***********************************
  64 + * from stuff
  65 + ***********************************/
  66 +div.comatose_field {
114 } 67 }
115 -#content .page-form .label {  
116 - padding-top: 5px;  
117 - width: 75px;  
118 - text-align: right;  
119 - padding-right: 10px;  
120 -}  
121 -#content .page-form .label.body {  
122 - vertical-align: top;  
123 - padding-top: 10px;  
124 -}  
125 -#content .page-form .field {  
126 - padding-top: 5px;  
127 -}  
128 -#content .page-form .field-help {  
129 -/* color: gray; */  
130 -}  
131 -#content .page-form #page_title { 68 +div.comatose_field label {
  69 + display: block;
132 font-weight: bold; 70 font-weight: bold;
133 } 71 }
134 -#content .page-form #page_slug {  
135 -/* color: gray; */  
136 -}  
137 -#content .page-form #page_body {  
138 - font-family: monospace;  
139 -}  
140 72
141 -#content #button-group {  
142 - padding: 10px;  
143 - text-align: right;  
144 -/* background-color: #EAEAEA; */  
145 - margin-top: 10px;  
146 -}  
147 -#content #button-group .last-update {  
148 - float: left;  
149 -/* color: gray; */  
150 - padding-top: 4px;  
151 - font-weight: bold;  
152 -}  
153 -#content #button-group .last-update LABEL {  
154 - font-weight: normal;  
155 -}  
156 -#content #button-group .last-update A {  
157 -/* color: gray; */  
158 -}  
159 -#content #button-group A {  
160 -/* color: maroon; */ 73 +div.comatose_field textarea {
  74 + width: 90%;
161 } 75 }
162 -#content #button-group A:hover {  
163 -/* color: red; */ 76 +div.comatose_field textarea,
  77 +div.comatose_field input,
  78 +div.comatose_field select {
  79 + border: 1px solid gray;
164 } 80 }
165 81
166 -#content #preview-area {  
167 - margin-top: 10px;  
168 -}  
169 -#content #preview-area FIELDSET {  
170 -/* border: 1px solid silver; */  
171 -}  
172 -#content #preview-area LEGEND {  
173 - font-size: 125%;  
174 -}  
175 -#content #preview-area .preview-body {  
176 - padding: 10px;  
177 -}  
178 -#content #preview-area .preview-note {  
179 -/* background: #FFFFD9; */  
180 - padding: 15px;  
181 -}  
182 -#content #preview-area .commands {  
183 - text-align: right;  
184 -/* color: gray; */  
185 -}  
186 -#content #preview-area .commands A {  
187 -/* color: gray; */  
188 -}  
189 -#content #preview-area .commands A:hover {  
190 -/* color: black; */  
191 -}  
192 -#content .revisions {  
193 - padding: 10px;  
194 - width: 49%;  
195 -}  
196 -#content .current-content {  
197 -}  
198 -#content .older-content {  
199 -/* background: #E9E9E9; */  
200 - float: right;  
201 -} 82 +/****************************************
  83 + * revisions page stuff
  84 + ****************************************/
202 85
203 -#content .revisions label {  
204 - display: block;  
205 -/* color: #000; */  
206 -}  
207 -#content .revisions label span {  
208 -/* color: #999; */  
209 - font-weight: normal !important;  
210 -}  
211 -#content .revisions .title {  
212 - font-weight: bold;  
213 - margin-top: 5px;  
214 -}  
215 -#content .revisions .header {  
216 - font-size: 110%;  
217 - vertical-align: middle;  
218 - font-weight: bold;  
219 -}  
220 -#content .revisions .header-actions { 86 +.older-content {
221 float: right; 87 float: right;
222 - font-size: 90%;  
223 - font-weight: normal;  
224 -/* color: #999; */  
225 -}  
226 -#content .revisions .meta {  
227 - margin-bottom: 15px;  
228 -}  
229 -#content .revisions .footer {  
230 - margin-top: 25px !important;  
231 - text-align: center !important;  
232 -}  
233 -#content #go-btn {  
234 - display: none;  
235 } 88 }
236 -/* Errors */  
237 -#errorExplanation {  
238 - border: 1px solid red;  
239 -/* background: #FFEAEB; */  
240 - padding: 10px;  
241 - margin-top: 10px;  
242 -}  
243 -#errorExplanation h2 {  
244 - margin: 0px;  
245 - padding: 0px;  
246 -/* color: maroon; */  
247 -}  
248 -#errorExplanation p {  
249 - margin: 0px;  
250 - padding: 0px;  
251 - padding-top: 5px;  
252 - padding-left: 15px;  
253 -}  
254 -#errorExplanation ul {  
255 - margin: 0px;  
256 - padding: 0px;  
257 - padding-left: 35px;  
258 -}  
259 -#errorExplanation li {  
260 - margin: 0px;  
261 - padding: 0px;  
262 - padding-top: 5px; 89 +.current-content {
  90 + float: left;
263 } 91 }
264 92
265 -/* Footer Area*/  
266 -/*  
267 -#footer {  
268 - border-top: 4px solid #AAA;  
269 - text-align: center;  
270 - font-size: 90%;  
271 - color: #AAA;  
272 - padding-top: 5px;  
273 - padding-bottom: 5px; 93 +.revisions {
  94 + width: 47%;
  95 + border: 1px solid gray;
  96 + padding: 0.25em;
274 } 97 }
275 -#footer A {  
276 - color: #AAA;  
277 - text-decoration: none; 98 +
  99 +.revisions .header {
278 font-weight: bold; 100 font-weight: bold;
  101 + border-bottom: 1px solid black;
  102 + margin-bottom: 10px;
  103 + height: 40px;
279 } 104 }
280 -#footer A:hover {  
281 - color: #333;  
282 - text-decoration: underline;  
283 -}  
284 -*/  
285 -  
286 -/* Modifiers */  
287 105
288 -/* When JavaScript is Turned Off... We need to adjust some things... */  
289 -.noscript #more-options,  
290 -.noscript #preview-area,  
291 -.noscript #preview-btn,  
292 -.noscript .tree-controller {  
293 - display: none;  
294 -}  
295 -.noscript .page-list.collapsed {  
296 - display: block !important;  
297 -}  
298 -.noscript .delete-page:hover {  
299 - color: red !important;  
300 -}  
301 -.noscript #content .page-form #page_title,  
302 -.noscript #content .page-form #page_slug,  
303 -.noscript #content .page-form #page_parent,  
304 -.noscript #content .page-form #page_keywords,  
305 -.noscript #content .page-form #page_body {  
306 - width: 100% !important;  
307 -}  
308 -.noscript #content .revisions #go-btn {  
309 - display: inline; 106 +.revisions .meta {
  107 + border-bottom: 1px solid black;
  108 + margin-bottom: 10px;
310 } 109 }
311 110
312 -ul.page-list li table,  
313 -ul.page-list li td {  
314 - border: none; 111 +.revisions .footer {
  112 + border-top: 1px solid black;
  113 + margin-top: 10px;
  114 + padding: 0.25em;
315 } 115 }
316 116
317 -div.comatose_field label {  
318 - display: block; 117 +.revisions .meta label span {
319 font-weight: bold; 118 font-weight: bold;
320 } 119 }
321 120
322 -div.comatose_field textarea {  
323 - width: 100%;  
324 -}  
325 -div.comatose_field textarea,  
326 -div.comatose_field input,  
327 -div.comatose_field select {  
328 - border: 1px solid gray; 121 +.revisions .meta label {
  122 + font-weight: normal;
  123 + display: block;
329 } 124 }