mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-06-28 15:39:40 +02:00
- Add GridfieldActionsComponent
- Add ability to set desired relative width on gridfield cells
This commit is contained in:
scott1702
Ingo Schommer
parent
ef97e0b52f
commit
e550363c67
|
|
@ -125,9 +125,6 @@
|
|||
.font-icon-logout:before {
|
||||
content: "z";
|
||||
}
|
||||
.font-icon-cancel:before {
|
||||
content: "D";
|
||||
}
|
||||
.font-icon-cancel-circled:before {
|
||||
content: "Q";
|
||||
}
|
||||
|
|
@ -155,9 +152,6 @@
|
|||
.font-icon-cog:before {
|
||||
content: "Y";
|
||||
}
|
||||
.font-icon-rocket:before {
|
||||
content: "Z";
|
||||
}
|
||||
.font-icon-install:before {
|
||||
content: "a";
|
||||
}
|
||||
|
|
@ -197,6 +191,18 @@
|
|||
.font-icon-right-open-big:before {
|
||||
content: "\38";
|
||||
}
|
||||
.font-icon-dot-3:before {
|
||||
content: "\39";
|
||||
}
|
||||
.font-icon-save:before {
|
||||
content: "\21";
|
||||
}
|
||||
.font-icon-rocket:before {
|
||||
content: "\5a";
|
||||
}
|
||||
.font-icon-cancel:before {
|
||||
content: "\44";
|
||||
}
|
||||
|
||||
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-family:inherit;font-size:100%;vertical-align:baseline}
|
||||
body{line-height:1;color:#000;background:#fff}
|
||||
|
|
@ -339,10 +345,6 @@ h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercas
|
|||
<div class="icon font-icon-logout"></div>
|
||||
<input type="text" readonly="readonly" value="logout">
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon font-icon-cancel"></div>
|
||||
<input type="text" readonly="readonly" value="cancel">
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon font-icon-cancel-circled"></div>
|
||||
<input type="text" readonly="readonly" value="cancel-circled">
|
||||
|
|
@ -379,10 +381,6 @@ h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercas
|
|||
<div class="icon font-icon-cog"></div>
|
||||
<input type="text" readonly="readonly" value="cog">
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon font-icon-rocket"></div>
|
||||
<input type="text" readonly="readonly" value="rocket">
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon font-icon-install"></div>
|
||||
<input type="text" readonly="readonly" value="install">
|
||||
|
|
@ -435,6 +433,22 @@ h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercas
|
|||
<div class="icon font-icon-right-open-big"></div>
|
||||
<input type="text" readonly="readonly" value="right-open-big">
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon font-icon-dot-3"></div>
|
||||
<input type="text" readonly="readonly" value="dot-3">
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon font-icon-save"></div>
|
||||
<input type="text" readonly="readonly" value="save">
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon font-icon-rocket"></div>
|
||||
<input type="text" readonly="readonly" value="rocket">
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon font-icon-cancel"></div>
|
||||
<input type="text" readonly="readonly" value="cancel">
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Character mapping</h2>
|
||||
<ul class="glyphs character-mapping">
|
||||
|
|
@ -642,6 +656,22 @@ h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercas
|
|||
<div data-icon="8" class="icon"></div>
|
||||
<input type="text" readonly="readonly" value="8">
|
||||
</li>
|
||||
<li>
|
||||
<div data-icon="9" class="icon"></div>
|
||||
<input type="text" readonly="readonly" value="9">
|
||||
</li>
|
||||
<li>
|
||||
<div data-icon="!" class="icon"></div>
|
||||
<input type="text" readonly="readonly" value="!">
|
||||
</li>
|
||||
<li>
|
||||
<div data-icon="Z" class="icon"></div>
|
||||
<input type="text" readonly="readonly" value="Z">
|
||||
</li>
|
||||
<li>
|
||||
<div data-icon="D" class="icon"></div>
|
||||
<input type="text" readonly="readonly" value="D">
|
||||
</li>
|
||||
</ul>
|
||||
</div><script type="text/javascript">
|
||||
(function() {
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -16,7 +16,7 @@
|
|||
<glyph glyph-name="book" unicode="n" d="M426 381c6-3 9-8 9-14 0 0 0-288 0-288 0-5-2-9-6-13-4-4-9-6-14-6-16 0-24 7-24 19 0 0 0 267 0 267 0 4-2 7-6 9 0 0-207 111-207 111-11 3-22 2-35-5-15-7-24-15-28-23 0 0 209-116 209-116 6-3 9-8 9-15 0 0 0-281 0-281 0-8-3-13-9-15-2-1-5-2-9-2-4 0-8 1-10 2-3 2-37 24-103 65-66 42-103 64-109 67-9 7-13 12-13 18 0 0-3 268-3 268 0 10 2 18 7 27 10 15 27 29 52 39 25 11 45 12 60 5 0 0 230-119 230-119"/>
|
||||
<glyph glyph-name="book-open" unicode="o" d="M200 199c0 0 0-35 0-35 0 0-103 41-103 41 0 0 0 35 0 35 0 0 103-41 103-41m0 106c0 0 0-35 0-35 0 0-103 41-103 41 0 0 0 35 0 35 0 0 103-41 103-41m275 177c8-4 11-11 11-21 0 0 0-328 0-328 0-11-5-19-16-23 0 0-204-82-204-82-2-1-4-1-5-1-1 0-1-1-2-1-1 0-2 0-3 0-1 0-2 0-3 0-1 0-1 1-2 1 0 0-5 1-5 1 0 0-204 82-204 82-11 4-16 12-16 23 0 0 0 328 0 328 0 10 3 17 11 21 7 6 15 7 23 3 0 0 196-78 196-78 0 0 196 78 196 78 8 4 16 3 23-3m-245-403c0 0 0 287 0 287 0 0-163 65-163 65 0 0 0-287 0-287 0 0 163-65 163-65m215 65c0 0 0 287 0 287 0 0-163-65-163-65 0 0 0-287 0-287 0 0 163 65 163 65m-30 96c0 0 0-35 0-35 0 0-103-41-103-41 0 0 0 35 0 35 0 0 103 41 103 41m0 106c0 0 0-35 0-35 0 0-103-41-103-41 0 0 0 35 0 35 0 0 103 41 103 41"/>
|
||||
<glyph glyph-name="plus" unicode="j" d="M418 418c-45 43-102 66-162 66-60 0-117-23-162-66-43-45-66-102-66-162 0-60 23-117 66-162 45-43 102-66 162-66 60 0 117 23 162 66 43 45 66 102 66 162 0 60-23 117-66 162z m-37-287c-34-34-77-51-125-51-48 0-91 17-125 51-34 34-51 77-51 125 0 48 17 91 51 125 34 34 77 51 125 51 48 0 91-17 125-51 34-34 51-77 51-125 0-48-17-91-51-125z m-14 99l-85 0 0-85-52 0 0 85-85 0 0 52 85 0 0 85 52 0 0-85 85 0z"/>
|
||||
<glyph glyph-name="icon-tree" unicode="p" d="M358 401l0 43c0 17 15 28 29 28l68 0c17 0 29-14 29-28l0-117c0-17-15-28-29-28l-65 0c-17 0-29 14-29 28l0 46-94 0c0-9 0-217 0-217 0-8 6-14 15-14l76 0 0 43c0 17 15 28 29 28l68 0c17 0 29-14 29-28l0-117c0-17-15-28-29-28l-65 0c-17 0-29 14-29 28l0 43-79 0c-26 0-46 20-46 43l0 219-82 0 0-43c0-17-15-28-29-28l-68 0c-17 0-29 14-29 28l0 114c0 17 15 28 29 28l65 0c17 0 29-14 29-28l0-43z"/>
|
||||
<glyph glyph-name="tree" unicode="p" d="M358 401l0 43c0 17 15 28 29 28l68 0c17 0 29-14 29-28l0-117c0-17-15-28-29-28l-65 0c-17 0-29 14-29 28l0 46-94 0c0-9 0-217 0-217 0-8 6-14 15-14l76 0 0 43c0 17 15 28 29 28l68 0c17 0 29-14 29-28l0-117c0-17-15-28-29-28l-65 0c-17 0-29 14-29 28l0 43-79 0c-26 0-46 20-46 43l0 219-82 0 0-43c0-17-15-28-29-28l-68 0c-17 0-29 14-29 28l0 114c0 17 15 28 29 28l65 0c17 0 29-14 29-28l0-43z"/>
|
||||
<glyph glyph-name="flow-tree" unicode="q" d="M460 134c24-11 37-31 37-57 0-17-6-32-18-44-12-12-27-18-44-18-17 0-31 6-43 18-12 12-18 27-18 44 0 26 12 46 37 57 0 0 0 59 0 59 0 26-13 39-39 39 0 0-51 0-51 0-16 0-29 2-40 7 0 0 0-105 0-105 24-11 36-31 36-57 0-17-6-32-17-44-12-12-27-18-44-18-17 0-32 6-44 18-11 12-17 27-17 44 0 26 12 46 36 57 0 0 0 105 0 105-10-5-23-7-38-7 0 0-52 0-52 0-11 0-20-3-27-9-6-7-10-12-11-17-1-5-2-9-2-13 0 0 0-59 0-59 25-11 37-31 37-57 0-17-6-32-18-44-12-12-26-18-43-18-17 0-32 6-44 18-12 12-18 27-18 44 0 26 13 46 37 57 0 0 0 59 0 59 0 21 8 41 22 60 15 18 37 28 67 28 0 0 52 0 52 0 25 0 38 8 38 26 0 0 0 72 0 72-24 11-36 30-36 56 0 17 6 32 17 44 12 12 27 18 44 18 17 0 32-6 44-18 11-12 17-27 17-44 0-26-12-45-36-56 0 0 0-72 0-72 0-18 13-26 40-26 0 0 51 0 51 0 29 0 51-10 66-28 14-19 22-39 22-60 0 0 0-59 0-59m-347-57c0 10-4 19-11 25-7 7-16 11-25 11-10 0-18-4-25-11-7-6-10-15-10-25 0-10 3-18 10-25 7-7 15-10 25-10 9 0 18 3 25 10 7 7 11 15 11 25m108 358c0-9 4-18 10-24 7-7 15-11 25-11 10 0 18 4 25 11 7 6 11 15 11 24 0 10-4 19-11 26-7 7-15 10-25 10-10 0-18-3-25-10-6-7-10-16-10-26m71-358c0 10-4 19-11 25-7 7-15 11-25 11-10 0-18-4-25-11-6-6-10-15-10-25 0-10 4-18 10-25 7-7 15-10 25-10 10 0 18 3 25 10 7 7 11 15 11 25m143-35c10 0 18 3 25 10 7 7 11 15 11 25 0 10-4 19-11 25-7 7-15 11-25 11-9 0-18-4-24-11-7-6-11-15-11-25 0-10 4-18 11-25 6-7 15-10 24-10"/>
|
||||
<glyph glyph-name="info-circled" unicode="y" d="M253 492c65 0 120-22 167-67 46-45 70-100 72-165 0-65-22-121-68-167-45-47-100-71-165-73-65 0-121 22-167 68-47 45-71 100-72 165-1 65 21 121 67 167 46 47 101 71 166 72m27-78c-15 0-26-4-34-13-8-8-12-16-12-25 0-10 2-17 8-23 6-5 14-8 25-8 13 0 24 4 31 11 8 8 12 17 12 28 0 20-10 30-30 30m-62-304c10 0 25 4 43 13 19 9 37 22 54 40 0 0-9 12-9 12-16-12-28-18-37-18-4 0-5 6-2 19 0 0 22 82 22 82 9 33 5 49-11 49-11 0-26-5-46-15-20-10-40-22-59-38 0 0 8-13 8-13 18 11 31 17 38 17 4 0 4-6 0-17 0 0-18-78-18-78-9-36-3-53 17-53"/>
|
||||
<glyph glyph-name="chart-line" unicode="B" d="M17 222c-14 4-20 13-16 29 3 14 12 20 27 16 0 0 50-12 50-12 0 0-26-41-26-41 0 0-35 8-35 8m455-6c4 4 10 6 16 6 7-1 12-3 16-8 11-11 11-22-1-33 0 0-128-115-128-115-5-4-10-6-16-6-5 0-9 2-14 5 0 0-146 112-146 112 0 0-28 8-28 8 0 0 26 40 26 40 0 0 18-4 18-4 4-1 7-2 8-4 0 0 135-104 135-104 0 0 114 103 114 103m-251 112c0 0-178-280-178-280-4-8-11-12-20-12-4 0-8 2-12 5-5 3-9 8-10 14-1 7 0 12 3 17 0 0 191 300 191 300 3 6 7 9 14 11 6 2 12 1 19-3 0 0 125-80 125-80 0 0 115 166 115 166 4 6 9 9 15 10 6 1 12-1 17-5 13-8 15-18 6-31 0 0-128-185-128-185-9-12-19-14-32-6 0 0-125 79-125 79"/>
|
||||
|
|
@ -30,7 +30,6 @@
|
|||
<glyph glyph-name="chat" unicode="t" d="M148 200c0 0 180 0 180 0 0 0 1 0 3 1 0 0 2 0 2 0 0 0 0-47 0-47 0-14-5-26-15-36-10-10-22-16-36-16 0 0-128 0-128 0 0 0-77-76-77-76 0 0 0 76 0 76 0 0-26 0-26 0-13 0-25 6-36 16-10 10-15 22-15 36 0 0 0 153 0 153 0 15 5 27 15 37 11 9 23 14 36 14 0 0 97 0 97 0 0 0 0-158 0-158m313 286c14 0 26-5 36-14 10-10 15-22 15-37 0 0 0-153 0-153 0-14-5-26-15-36-10-10-22-16-36-16 0 0-26 0-26 0 0 0 0-76 0-76 0 0-77 76-77 76 0 0-179 0-179 0 0 0 0 205 0 205 0 15 5 27 16 37 10 9 22 14 35 14 0 0 231 0 231 0"/>
|
||||
<glyph glyph-name="comment" unicode="w" d="M410 435c14 0 26-5 36-15 10-10 15-22 15-36 0 0 0-179 0-179 0-14-5-26-15-36-10-10-22-15-36-15 0 0-103 0-103 0 0 0 0-77 0-77 0 0-102 77-102 77 0 0-103 0-103 0-13 0-25 5-35 15-11 10-16 22-16 36 0 0 0 179 0 179 0 14 5 26 16 36 10 10 22 15 35 15 0 0 308 0 308 0"/>
|
||||
<glyph glyph-name="logout" unicode="z" d="M283 77c0 0 0 51 0 51 0 0 50 0 50 0 0 0 0-51 0-51 0-14-5-26-15-36-10-10-22-15-36-15 0 0-205 0-205 0-14 0-26 5-36 15-10 10-15 22-15 36 0 0 0 358 0 358 0 15 5 27 15 37 10 9 22 14 36 14 0 0 205 0 205 0 14 0 26-5 36-14 10-10 15-22 15-37 0 0 0-77 0-77 0 0-50 0-50 0 0 0 0 77 0 77 0 0-206 0-206 0 0 0 0-358 0-358 0 0 206 0 206 0m203 167c0 0-101-101-101-101 0 0 0 62 0 62 0 0-230 0-230 0 0 0 0 77 0 77 0 0 230 0 230 0 0 0 0 61 0 61 0 0 101-99 101-99"/>
|
||||
<glyph glyph-name="cancel" unicode="D" d="M367 176c6-6 9-13 9-22 0-8-3-16-9-22-6-5-13-8-22-8-8 0-16 3-22 8 0 0-68 78-68 78 0 0-67-78-67-78-6-5-14-8-22-8-9 0-16 3-22 8-6 6-8 14-8 22 0 9 2 16 8 22 0 0 71 80 71 80 0 0-71 81-71 81-6 6-8 13-8 22 0 8 2 16 8 22 6 5 13 8 22 8 8 0 16-3 22-8 0 0 67-78 67-78 0 0 68 78 68 78 6 5 14 8 22 8 9 0 16-3 22-8 6-6 9-14 9-22 0-9-3-16-9-22 0 0-71-81-71-81 0 0 71-80 71-80"/>
|
||||
<glyph glyph-name="cancel-circled" unicode="Q" d="M256 471c59 0 110-21 152-63 42-42 63-93 63-152 0-59-21-110-63-152-42-42-93-63-152-63-59 0-110 21-152 63-42 42-63 93-63 152 0 59 21 110 63 152 42 42 93 63 152 63m44-215c0 0 79 79 79 79 0 0-44 44-44 44 0 0-79-78-79-78 0 0-78 78-78 78 0 0-45-44-45-44 0 0 79-79 79-79 0 0-79-78-79-78 0 0 45-44 45-44 0 0 78 78 78 78 0 0 79-78 79-78 0 0 44 44 44 44 0 0-79 78-79 78"/>
|
||||
<glyph glyph-name="left-open" unicode="T" d="M293 397c4 6 11 9 20 9 8 0 15-3 21-9 13-12 13-26 0-41 0 0-96-100-96-100 0 0 96-99 96-99 13-15 13-29 0-41-6-6-13-8-21-8-8 0-15 2-20 8 0 0-116 121-116 121-6 5-8 11-8 19 0 8 2 15 8 20 70 74 109 114 116 121"/>
|
||||
<glyph glyph-name="right-open" unicode="U" d="M219 397c0 0 116-121 116-121 5-5 8-12 8-20 0-8-3-14-8-19 0 0-116-121-116-121-5-6-12-8-20-8-9 0-15 2-21 8-12 12-12 26 0 41 0 0 95 99 95 99 0 0-95 100-95 100-12 15-12 29 0 41 6 6 13 9 21 9 9 0 15-3 20-9"/>
|
||||
|
|
@ -38,7 +37,6 @@
|
|||
<glyph glyph-name="check-mark-circle" unicode="I" d="M403 302c0 6-1 10-5 13l-26 26c-3 4-8 6-13 6-5 0-9-2-12-6l-117-116-65 64c-3 4-7 6-12 6-5 0-10-2-13-6l-26-25c-4-4-5-8-5-13 0-6 1-10 5-13l103-104c4-3 8-5 13-5 5 0 10 2 13 5l155 155c4 4 5 8 5 13z m72-46c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
|
||||
<glyph glyph-name="back-in-time" unicode="X" d="M288 466c58 0 107-21 148-62 40-40 61-90 61-148 0-58-21-108-61-148-41-41-90-62-148-62-47 0-90 15-129 45 0 0 36 39 36 39 28-20 59-31 93-31 43 0 80 16 110 46 31 31 46 68 46 111 0 44-15 81-46 112-30 30-67 46-110 46-43 0-79-15-109-44-31-30-47-66-48-108 0 0 73 0 73 0 0 0-94-105-94-105 0 0-95 105-95 105 0 0 64 0 64 0 1 57 22 105 63 145 40 39 89 59 146 59m-19-97c0 0 36 0 36 0 0 0 0-105 0-105 0 0 67-66 67-66 0 0-26-26-26-26 0 0-77 77-77 77 0 0 0 120 0 120"/>
|
||||
<glyph glyph-name="cog" unicode="Y" d="M430 256c0-25 14-45 41-62-4-14-10-28-17-42-24 6-47-2-70-23-18-20-24-43-17-70-14-6-28-13-43-18-16 28-39 42-68 42-29 0-52-14-68-42-15 5-29 12-43 18 7 28 1 51-17 70-18 18-42 24-70 17-4 9-10 23-17 42 28 18 42 41 42 68 0 25-14 46-42 63 7 20 13 34 17 42 26-6 49 2 70 23 18 19 24 42 17 70 15 7 29 13 43 17 16-27 39-41 68-41 29 0 52 14 68 41 14-4 28-10 43-17-7-27-1-50 17-70 23-21 46-29 70-23 7-14 13-28 17-42-27-17-41-38-41-63m-174-93c26 0 48 9 66 27 18 18 27 40 27 66 0 26-9 48-27 67-18 18-40 27-66 27-26 0-48-9-66-27-18-19-27-41-27-67 0-26 9-48 27-66 18-18 40-27 66-27"/>
|
||||
<glyph glyph-name="rocket" unicode="Z" d="M314 198c3-17 4-31 5-42 0-10-1-20-5-30-3-10-5-16-6-21-1-4-7-9-18-16-11-7-19-11-23-13-5-2-17-8-36-16-19-9-34-15-43-19-11-4-19-3-24 2-4 5-4 13-1 23 0 0 20 56 20 56 0 0-66 67-66 67 0 0-54-20-54-20-10-4-17-4-22 1-6 5-6 13-2 24 4 10 9 23 16 40 6 17 11 28 14 33 2 6 6 13 11 23 5 10 9 16 13 19 4 2 9 6 15 10 6 4 13 7 21 7 0 0 26 0 26 0 0 0 12-1 37-3 3 4 8 11 14 20 7 8 20 23 40 43 20 21 40 38 60 53 21 15 46 28 75 39 29 10 57 14 84 9 3 0 5-1 7-3 2-1 3-3 3-7 4-28 1-56-9-86-10-29-22-55-39-77-16-22-33-42-50-61-17-18-32-31-44-41 0 0-19-14-19-14m26 151c8-7 17-11 28-11 11 0 20 4 27 11 8 8 12 18 12 29 0 11-4 20-12 29-7 7-16 11-27 11-11 0-20-4-28-11-7-9-11-18-11-29 0-11 4-21 11-29"/>
|
||||
<glyph glyph-name="fast-forward" unicode="h" d="M474 268c5-3 7-7 7-12 0-5-2-9-7-11 0 0-190-127-190-127-8-5-14-6-19-3-5 2-8 9-8 18 0 0 0 247 0 247 0 9 3 16 8 18 5 3 11 2 19-3 0 0 190-127 190-127m-232 0c4-3 7-7 7-12 0-5-3-9-7-11 0 0-185-127-185-127-6-5-13-6-18-3-6 2-8 9-8 18 0 0 0 247 0 247 0 9 2 16 8 18 5 3 12 2 18-3 0 0 185-127 185-127"/>
|
||||
<glyph glyph-name="install" unicode="a" d="M478 233c8-17 11-34 7-49 0 0-17-94-17-94-1-7-4-13-10-18-6-5-12-7-20-7 0 0-364 0-364 0-8 0-15 2-20 7-6 5-9 11-10 18 0 0-18 94-18 94-2 17 0 34 8 49 0 0 80 192 80 192 8 16 20 24 37 24 0 0 54 0 54 0 0 0-11-105-11-105 0 0-68 0-68 0 0 0 130-107 130-107 0 0 131 107 131 107 0 0-70 0-70 0 0 0-9 105-9 105 0 0 52 0 52 0 17 0 30-8 38-24 0 0 80-192 80-192m-35-67c1 7-1 14-5 19-4 6-10 9-17 9 0 0-330 0-330 0-8 0-13-3-17-9-5-5-6-12-6-19 0 0 8-38 8-38 0-8 4-14 9-19 6-5 12-8 19-8 0 0 303 0 303 0 8 0 15 3 20 8 6 5 9 11 10 19 0 0 6 38 6 38"/>
|
||||
<glyph glyph-name="down-circled" unicode="i" d="M256 492c65 0 120-24 166-70 46-46 70-101 70-166 0-65-24-120-70-166-46-46-101-70-166-70-65 0-120 24-166 70-46 46-70 101-70 166 0 65 24 120 70 166 46 46 101 70 166 70m0-420c51 0 94 18 130 54 36 36 54 79 54 130 0 51-18 95-54 131-36 35-79 53-130 53-51 0-94-18-130-53-36-36-54-80-54-131 0-51 18-94 54-130 36-36 79-54 130-54m46 283c0 0 0-105 0-105 0 0 57 0 57 0 0 0-103-97-103-97 0 0-103 97-103 97 0 0 57 0 57 0 0 0 0 105 0 105 0 0 92 0 92 0"/>
|
||||
|
|
@ -68,4 +66,8 @@
|
|||
<glyph glyph-name="down-open-big" unicode="6" d="M67 369c0 0 189-183 189-183 0 0 190 183 190 183 8 9 16 9 25 0 9-8 9-16 0-25 0 0-203-201-203-201-7-7-15-7-24 0 0 0-203 201-203 201-9 9-9 17 0 25 8 8 17 8 26 0"/>
|
||||
<glyph glyph-name="up-open-big" unicode="7" d="M446 143c0 0-190 184-190 184 0 0-189-184-189-184-9-7-18-7-26 0-8 9-8 17 0 26 0 0 203 200 203 200 9 9 17 9 24 0 0 0 203-200 203-200 8-9 8-17 0-26-9-7-17-7-25 0"/>
|
||||
<glyph glyph-name="right-open-big" unicode="8" d="M144 67c0 0 183 189 183 189 0 0-183 190-183 190-9 9-9 18 0 25 8 9 17 9 24 0 0 0 201-202 201-202 8-9 8-17 0-25 0 0-201-202-201-202-7-9-16-9-24 0-9 7-9 16 0 25"/>
|
||||
<glyph glyph-name="dot-3" unicode="9" d="M77 312c16 0 29-5 40-16 11-11 16-24 16-40 0-15-5-28-16-39-11-12-24-17-40-17-16 0-29 5-40 17-11 11-17 24-17 39 0 16 6 29 17 40 11 11 24 16 40 16m179 0c16 0 29-5 40-16 11-11 16-24 16-40 0-15-5-28-17-39-11-12-24-17-39-17-15 0-28 5-39 17-12 11-17 24-17 39 0 16 5 29 16 40 11 11 24 16 40 16m179 0c16 0 29-5 40-16 11-11 17-24 17-40 0-15-6-28-17-39-11-12-24-17-40-17-15 0-29 5-40 17-11 11-16 24-16 39 0 16 5 29 16 40 11 11 25 16 40 16"/>
|
||||
<glyph glyph-name="save" unicode="!" d="M358 125c0 3 0 6 0 6l0 34c46 0 83 37 83 82 0 46-37 83-83 83-11 0-25-3-34-9l-17 17c-28 63-102 92-165 63-45-20-74-63-74-114 0-68 23-125 94-125l0-34c0-3 0-6 0-6-91 3-134 77-134 168 0 91 74 165 165 165 60 0 114-31 145-85 69 14 134-32 146-100 11-68-32-133-100-145-6 0-17 0-26 0z m-102 188l-85-114 57 0 0-171 56 0 0 171 57 0z"/>
|
||||
<glyph glyph-name="rocket" unicode="Z" d="M102 51c35 6 74 17 91 63 0 0 0 3-2 3-15-6-29-12-43-12 0 0-3 0-3 3-3 14 0 29 3 43 0 0 0 3-3 3-43-23-48-60-51-100 6 0 6-3 8-3z m111 262c-62-6-119-37-159-83 0-2 3-2 3-2 37 11 74 11 111 5 3 0 3-3 3-8l-9-43c0-3 0-6 3-6 11-2 20-8 28-17 9-8 17-17 20-28 0-3 3-3 6-3l40 17c3 0 6 0 8-3 12-34 15-74 9-111 0-3 0-3 3-3 0 0 3 0 3 0 42 46 65 106 62 168 0 3 0 3 3 3 85 71 134 174 137 282-109-15-205-77-265-168-3 3-3 0-6 0z m148 31c17-17 20-42 3-60-17-17-43-19-60-2-20 14-20 42-5 59 17 17 42 20 62 3 0 3 0 3 0 0z"/>
|
||||
<glyph glyph-name="cancel" unicode="D" d="M284 256l106 105c5 6 8 9 8 14 3 12-5 20-17 23-3 0-3 0-6 0-5 0-11-3-14-5l-105-109-105 109c-6 2-12 5-14 5-12 3-20-5-23-17 0-3 0-3 0-6 0-5 3-8 5-14l109-105-109-105c-2-6-5-12-5-14 0-12 5-20 17-20 3 0 3 0 6 0 5 0 11 2 14 5l105 106 105-106c3-3 9-5 14-5 12-3 20 5 20 17 0 0 0 3 0 3 0 5-2 11-5 14z"/>
|
||||
</font></defs></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
Binary file not shown.
Binary file not shown.
|
|
@ -6,7 +6,11 @@ This component is used to display a button which is linked to an action.
|
|||
|
||||
### handleClick (function)
|
||||
|
||||
The handler for when a button is clicked, is passed the click event as the only argument.
|
||||
The handler for when a button is clicked
|
||||
|
||||
#### Arguments
|
||||
|
||||
* event - the click event
|
||||
|
||||
### text (string)
|
||||
|
||||
|
|
|
|||
|
|
@ -92,18 +92,17 @@ class ActionComponent extends SilverStripeComponent {
|
|||
* @returns null
|
||||
*/
|
||||
handleClick(event) {
|
||||
if (typeof this.props.handleClick === 'function' && this.props.disabled !== true) {
|
||||
this.props.handleClick(event);
|
||||
}
|
||||
|
||||
return null;
|
||||
this.props.handleClick(event);
|
||||
}
|
||||
}
|
||||
|
||||
ActionComponent.propTypes = {
|
||||
handleClick: React.PropTypes.func.isRequired,
|
||||
type: React.PropTypes.string,
|
||||
icon: React.PropTypes.string,
|
||||
text: React.PropTypes.string
|
||||
text: React.PropTypes.string,
|
||||
loading: React.PropTypes.bool,
|
||||
disabled: React.PropTypes.bool
|
||||
};
|
||||
|
||||
export default ActionComponent;
|
||||
|
|
|
|||
|
|
@ -91,6 +91,8 @@
|
|||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:active:focus,
|
||||
&:active:hover,
|
||||
&:focus {
|
||||
background-color: $gray-lighter;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,11 +21,6 @@ describe('FormBuilderComponent', () => {
|
|||
|
||||
formBuilder = new FormBuilderComponent(props);
|
||||
});
|
||||
|
||||
it('should return the form schema for the FormBuilder', () => {
|
||||
const form = formBuilder.getFormSchema();
|
||||
expect(form.schema.id).toBe('1');
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
13
admin/javascript/src/components/grid-field-action/README.md
Normal file
13
admin/javascript/src/components/grid-field-action/README.md
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
# GridFieldAction
|
||||
|
||||
This component renders a button within a grid-field to handle actions.
|
||||
|
||||
## Props
|
||||
|
||||
### handleClick (function - required)
|
||||
|
||||
The handler for when a button is clicked
|
||||
|
||||
#### Arguments
|
||||
|
||||
* event - the click event
|
||||
28
admin/javascript/src/components/grid-field-action/index.js
Normal file
28
admin/javascript/src/components/grid-field-action/index.js
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import React from 'react';
|
||||
import SilverStripeComponent from 'silverstripe-component';
|
||||
|
||||
class GridFieldActionComponent extends SilverStripeComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.handleClick = this.handleClick.bind(this);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<button
|
||||
className={`grid-field-action-component font-icon-${this.props.icon}`}
|
||||
onClick={this.handleClick} />
|
||||
);
|
||||
}
|
||||
|
||||
handleClick(event) {
|
||||
this.props.handleClick(event);
|
||||
}
|
||||
}
|
||||
|
||||
GridFieldActionComponent.PropTypes = {
|
||||
handleClick: React.PropTypes.func.isRequired
|
||||
}
|
||||
|
||||
export default GridFieldActionComponent;
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
.grid-field-action-component {
|
||||
background: none;
|
||||
border: 0;
|
||||
color: $gray-dark;
|
||||
float: left;
|
||||
padding: 0 8px;
|
||||
height: 52px;
|
||||
|
||||
&:hover {
|
||||
color: darken($gray-dark, 10%);
|
||||
}
|
||||
|
||||
&::before {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
jest.dontMock('../index');
|
||||
|
||||
describe('GridFieldActionComponent', () => {
|
||||
|
||||
});
|
||||
|
|
@ -3,3 +3,7 @@
|
|||
This component represents a data cell in a GridFieldRow.
|
||||
|
||||
## Props
|
||||
|
||||
### width (number)
|
||||
|
||||
Set a width relative to the other cells if required. Accepts a number from 1-10 (defaults to 5).
|
||||
|
|
|
|||
|
|
@ -5,10 +5,30 @@ class GridFieldCellComponent extends SilverStripeComponent {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className='grid-field-cell-component'>{this.props.children}</div>
|
||||
<div className={this.getCellClassNames()}>{this.props.children}</div>
|
||||
);
|
||||
}
|
||||
|
||||
getCellClassNames() {
|
||||
var cellClassNames = 'grid-field-cell-component ';
|
||||
|
||||
if (typeof this.props.width !== 'number') {
|
||||
cellClassNames += 'cell-width-5';
|
||||
} else if (this.props.width > 10) {
|
||||
cellClassNames += 'cell-width-10';
|
||||
} else if (this.props.width < 1) {
|
||||
cellClassNames += 'cell-width-1';
|
||||
} else {
|
||||
cellClassNames += `cell-width-${this.props.width}`;
|
||||
}
|
||||
|
||||
return cellClassNames;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
GridFieldCellComponent.PropTypes = {
|
||||
width: React.PropTypes.number
|
||||
}
|
||||
|
||||
export default GridFieldCellComponent;
|
||||
|
|
|
|||
|
|
@ -8,4 +8,18 @@
|
|||
word-break: break-word;
|
||||
padding: $grid-y*2 $grid-x*2;
|
||||
line-height: 20px;
|
||||
|
||||
&:first-child {
|
||||
padding-left: $grid-x*2.5;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: $grid-x*2.5;
|
||||
}
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
&.cell-width-#{$i} {
|
||||
flex-grow: $i;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,3 +4,6 @@ This component is a cell in a GridFirldHeader component.
|
|||
|
||||
## Props
|
||||
|
||||
### width (number)
|
||||
|
||||
Set a width relative to the other cells if required. Accepts a number from 1-10 (defaults to 5).
|
||||
|
|
|
|||
|
|
@ -5,10 +5,30 @@ class GridFieldHeaderCellComponent extends SilverStripeComponent {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className='grid-field-header-cell-component'>{this.props.children}</div>
|
||||
<div className={this.getHeaderCellClassNames()}>{this.props.children}</div>
|
||||
);
|
||||
}
|
||||
|
||||
getHeaderCellClassNames() {
|
||||
var headerCellClassNames = 'grid-field-header-cell-component ';
|
||||
|
||||
if (typeof this.props.width !== 'number') {
|
||||
headerCellClassNames += 'cell-width-5';
|
||||
} else if (this.props.width > 10) {
|
||||
headerCellClassNames += 'cell-width-10';
|
||||
} else if (this.props.width < 1) {
|
||||
headerCellClassNames += 'cell-width-1';
|
||||
} else {
|
||||
headerCellClassNames += `cell-width-${this.props.width}`;
|
||||
}
|
||||
|
||||
return headerCellClassNames;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
GridFieldHeaderCellComponent.PropTypes = {
|
||||
width: React.PropTypes.number
|
||||
}
|
||||
|
||||
export default GridFieldHeaderCellComponent;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
.grid-field-header-cell-component {
|
||||
text-transform: uppercase;
|
||||
font-size: $font-size-root - 1;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
flex-grow: 1;
|
||||
|
|
@ -9,4 +10,18 @@
|
|||
word-break: break-word;
|
||||
padding: $grid-y*2 $grid-x*2;
|
||||
line-height: 20px;
|
||||
|
||||
&:first-child {
|
||||
padding-left: $grid-x*2.5;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: $grid-x*2.5;
|
||||
}
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
&.cell-width-#{$i} {
|
||||
flex-grow: $i;
|
||||
}
|
||||
}
|
||||
}
|
||||
15
admin/javascript/src/mocks/silverstripe-component.js
Normal file
15
admin/javascript/src/mocks/silverstripe-component.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import { Component } from 'react';
|
||||
|
||||
export default class SilverStripeComponent extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.CampaignAdmin {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
|
@ -5,11 +5,15 @@ import GridFieldHeader from '../../components/grid-field-header';
|
|||
import GridFieldHeaderCell from '../../components/grid-field-header-cell';
|
||||
import GridFieldRow from '../../components/grid-field-row';
|
||||
import GridFieldCell from '../../components/grid-field-cell';
|
||||
import GridFieldAction from '../../components/grid-field-action';
|
||||
|
||||
class GridField extends SilverStripeComponent {
|
||||
|
||||
constructor(props) {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.deleteCampaign = this.deleteCampaign.bind(this);
|
||||
this.editCampaign = this.editCampaign.bind(this);
|
||||
|
||||
// TODO: This will be an AJAX call and it's response stored in state.
|
||||
this.mockData = {
|
||||
|
|
@ -34,16 +38,43 @@ class GridField extends SilverStripeComponent {
|
|||
}
|
||||
|
||||
render() {
|
||||
const columnNames = ['title', 'changes', 'description'];
|
||||
const columns = [
|
||||
{
|
||||
name: 'title'
|
||||
},
|
||||
{
|
||||
name: 'changes',
|
||||
width: 2
|
||||
},
|
||||
{
|
||||
name: 'description',
|
||||
width: 6
|
||||
}
|
||||
];
|
||||
|
||||
const headerCells = columnNames.map((columnName, i) => <GridFieldHeaderCell key={i}>{columnName}</GridFieldHeaderCell>);
|
||||
const header = <GridFieldHeader>{headerCells}</GridFieldHeader>;
|
||||
const actions = [
|
||||
<GridFieldAction icon={'cog'} handleClick={this.editCampaign} />,
|
||||
<GridFieldAction icon={'cancel'} handleClick={this.deleteCampaign} />
|
||||
];
|
||||
|
||||
// Placeholder to align the headers correctly with the content
|
||||
const actionPlaceholder = <span key={'actionPlaceholder'} style={{width: actions.length * 36 + 12}} />;
|
||||
|
||||
const headerCells = columns.map((column, i) => <GridFieldHeaderCell key={i} width={column.width}>{column.name}</GridFieldHeaderCell>);
|
||||
const header = <GridFieldHeader>{headerCells.concat(actionPlaceholder)}</GridFieldHeader>;
|
||||
|
||||
const rows = this.mockData.campaigns.map((campaign, i) => {
|
||||
const cells = columnNames.map((columnName, i) => {
|
||||
return <GridFieldCell key={i}>{campaign[columnName]}</GridFieldCell>
|
||||
var cells = columns.map((column, i) => {
|
||||
return <GridFieldCell key={i} width={column.width}>{campaign[column.name]}</GridFieldCell>
|
||||
});
|
||||
return <GridFieldRow key={i}>{cells}</GridFieldRow>;
|
||||
|
||||
var rowActions = actions.map((action, j) => {
|
||||
return Object.assign({}, action, {
|
||||
key: `action-${i}-${j}`
|
||||
});
|
||||
})
|
||||
|
||||
return <GridFieldRow key={i}>{cells.concat(rowActions)}</GridFieldRow>;
|
||||
});
|
||||
|
||||
return (
|
||||
|
|
@ -51,6 +82,14 @@ class GridField extends SilverStripeComponent {
|
|||
);
|
||||
}
|
||||
|
||||
deleteCampaign(event) {
|
||||
// delete campaign
|
||||
}
|
||||
|
||||
editCampaign(event) {
|
||||
// edit campaign
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default GridField;
|
||||
|
|
|
|||
|
|
@ -9,64 +9,16 @@ describe('schemaReducer', () => {
|
|||
|
||||
describe('SET_SCHEMA', () => {
|
||||
|
||||
it('should create a new form when none exist', () => {
|
||||
const initialState = { forms: [] };
|
||||
const serverResponse = { id : 'TestForm' };
|
||||
it('should create a new form', () => {
|
||||
const initialState = { };
|
||||
const serverResponse = { id: 'TestForm', schema_url: 'URL' };
|
||||
|
||||
const nextState = schemaReducer(initialState, {
|
||||
type: ACTION_TYPES.SET_SCHEMA,
|
||||
payload: { schema: serverResponse }
|
||||
});
|
||||
|
||||
expect(nextState.forms.length).toBe(1);
|
||||
expect(JSON.stringify(nextState.forms[0])).toBe(JSON.stringify({ schema: { id: 'TestForm' } }));
|
||||
expect(nextState.URL.schema.id).toBe('TestForm');
|
||||
});
|
||||
|
||||
it('should update an existing form', () => {
|
||||
const initialState = {
|
||||
forms: [{
|
||||
schema: {
|
||||
id: 'TestForm',
|
||||
name: 'TestForm'
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
const serverResponse = { id: 'TestForm', name: 'BetterTestForm' };
|
||||
|
||||
const nextState = schemaReducer(initialState, {
|
||||
type: ACTION_TYPES.SET_SCHEMA,
|
||||
payload: { schema: serverResponse }
|
||||
});
|
||||
|
||||
expect(nextState.forms.length).toBe(1);
|
||||
expect(JSON.stringify(nextState.forms[0])).toBe(JSON.stringify({ schema: { id: 'TestForm', name: 'BetterTestForm' } }));
|
||||
});
|
||||
|
||||
it("should only update the the form's 'schema' key", () => {
|
||||
const initialState = {
|
||||
forms: [{
|
||||
schema: {
|
||||
id: 'TestForm',
|
||||
name: 'TestForm'
|
||||
},
|
||||
state: {
|
||||
error: 'Oops!'
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
const serverResponse = { id: 'TestForm', name: 'BetterTestForm' };
|
||||
|
||||
const nextState = schemaReducer(initialState, {
|
||||
type: ACTION_TYPES.SET_SCHEMA,
|
||||
payload: { schema: serverResponse }
|
||||
});
|
||||
|
||||
expect(nextState.forms.length).toBe(1);
|
||||
expect(JSON.stringify(nextState.forms[0])).toBe(JSON.stringify({ schema: { id: 'TestForm', name: 'BetterTestForm' }, state: { error: 'Oops!' } }));
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
@import "../components/grid-field-header/styles";
|
||||
@import "../components/grid-field-header-cell/styles";
|
||||
@import "../components/grid-field-row/styles";
|
||||
@import "../components/grid-field-action/styles";
|
||||
@import "../components/north-header/styles";
|
||||
@import "../components/north-header-breadcrumbs/styles";
|
||||
@import "../components/action/styles";
|
||||
|
|
|
|||
|
|
@ -103,9 +103,6 @@
|
|||
.font-icon-logout:before {
|
||||
content: "z";
|
||||
}
|
||||
.font-icon-cancel:before {
|
||||
content: "D";
|
||||
}
|
||||
.font-icon-cancel-circled:before {
|
||||
content: "Q";
|
||||
}
|
||||
|
|
@ -133,9 +130,6 @@
|
|||
.font-icon-cog:before {
|
||||
content: "Y";
|
||||
}
|
||||
.font-icon-rocket:before {
|
||||
content: "Z";
|
||||
}
|
||||
.font-icon-install:before {
|
||||
content: "a";
|
||||
}
|
||||
|
|
@ -186,4 +180,16 @@
|
|||
}
|
||||
.font-icon-link:before {
|
||||
content: "2";
|
||||
}
|
||||
}
|
||||
.font-icon-dot-3:before {
|
||||
content: "\39";
|
||||
}
|
||||
.font-icon-save:before {
|
||||
content: "\21";
|
||||
}
|
||||
.font-icon-rocket:before {
|
||||
content: "\5a";
|
||||
}
|
||||
.font-icon-cancel:before {
|
||||
content: "\44";
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user