styling for HasManyFileField

git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/sapphire/trunk@47371 467b73ca-7a2a-4603-9d3b-597d59a354a9
This commit is contained in:
Andrew O'Neil 2007-12-19 23:07:42 +00:00
parent 604ab689e2
commit c1e0533efc
8 changed files with 130 additions and 6 deletions

View File

@ -1,11 +1,127 @@
#right form .hasmanyfile a.addFile,
#right form .hasmanyfile a.uploadFile,
#right form .hasmanyfile li {
#right form .hasmanyfile .currentFiles li {
font-size: 1.2em;
padding-left: 3px;
}
#right form .hasmanyfile a.uploadFile {
background-image:url(../../cms/images/textures/ToolBar.png);
border-color:#CCCCCC rgb(153, 153, 153) rgb(153, 153, 153) rgb(204, 204, 204);
border-style:solid;
border-width: 2px;
color:#333333;
cursor:pointer;
font-size:11px;
font-weight: bold;
position: relative;
top: -29px;
left: 344px;
text-decoration: none;
overflow:visible;
padding:3px 5px;
float:left;
width:auto;
}
#right form .hasmanyfile a.removeFile {
padding-left: 3px;
font-size: 0.8em;
background-image:url(../../cms/images/textures/ToolBar.png);
border-color:#CCCCCC rgb(153, 153, 153) rgb(153, 153, 153) rgb(204, 204, 204);
border-style:solid;
border-width: 2px;
color:#333333;
cursor:pointer;
font-size:10px;
font-weight: bold;
text-decoration: none;
overflow:visible;
padding:3px 5px;
width:auto;
margin: -2px 0 0 10px;
}
#right form .hasmanyfile a.removeFile:hover {
background: #CE0000;
color: #fff;
}
#right form .hasmanyfile a.addFile {
background-image:url(../../cms/images/textures/ToolBar.png);
border-color:#CCCCCC rgb(153, 153, 153) rgb(153, 153, 153) rgb(204, 204, 204);
border-style:solid;
border-width: 2px;
color:#333333;
cursor:pointer;
font-size:11px;
font-weight: bold;
position: relative;
top: -29px;
left: 340px;
text-decoration: none;
overflow:visible;
padding:3px 5px;
float:left;
width:auto;
}
#right form .hasmanyfile a.addFile:hover,
#right form .hasmanyfile a.uploadFile:hover {
background: #fff;
}
#right form .hasmanyfile ul.currentFiles {
padding-bottom: 5px;
}
#right form .hasmanyfile .currentFiles li {
height: 30px;
line-height: 30px;
}
#right form .hasmanyfile .clear {
clear: both;
}
/* ICONS */
#right form .hasmanyfile .currentFiles a[href$=".pdf"],
#right form .hasmanyfile .currentFiles a[href$=".PDF"],
#right form .hasmanyfile .currentFiles a.pdf {
padding: 2px;
padding-left: 20px;
background: url(../../sapphire/images/icons/page_white_acrobat.png) no-repeat left center;
}
#right form .hasmanyfile .currentFiles a[href$=".doc"],
#right form .hasmanyfile .currentFiles a[href$=".DOC"],
#right form .hasmanyfile .currentFiles a.doc {
padding: 2px;
padding-left: 20px;
background: url(../../sapphire/images/icons/page_word.png) no-repeat left center;
}
#right form .hasmanyfile .currentFiles a[href$=".xls"],
#right form .hasmanyfile .currentFiles a[href$=".XLS"],
#right form .hasmanyfile .currentFiles a.xls {
padding: 2px;
padding-left: 20px;
background: url(../../sapphire/images/icons/page_excel.png) no-repeat left center;
}
#right form .hasmanyfile .currentFiles a[href$=".gz"],
#right form .hasmanyfile .currentFiles a[href$=".GZ"],
#right form .hasmanyfile .currentFiles a[href$=".gzip"],
#right form .hasmanyfile .currentFiles a[href$=".GZIP"],
#right form .hasmanyfile .currentFiles a[href$=".zip"],
#right form .hasmanyfile .currentFiles a[href$=".ZIP"],
#right form .hasmanyfile .currentFiles a.archive {
padding: 2px;
padding-left: 20px;
background: url(../../sapphire/images/icons/page_white_zip.png) no-repeat left center;
}
#right form .hasmanyfile .currentFiles a[href$=".jpg"],
#right form .hasmanyfile .currentFiles a[href$=".JPG"],
#right form .hasmanyfile .currentFiles a[href$=".gif"],
#right form .hasmanyfile .currentFiles a[href$=".GIF"],
#right form .hasmanyfile .currentFiles a[href$=".png"],
#right form .hasmanyfile .currentFiles a[href$=".PNG"],
#right form .hasmanyfile .currentFiles a.image {
padding: 2px;
padding-left: 20px;
background: url(../../sapphire/images/icons/icon-jpg.gif) no-repeat left center;
}
#right form .hasmanyfile .currentFiles a[href$=".exe"],
#right form .hasmanyfile .currentFiles a[href$=".EXE"],
#right form .hasmanyfile .currentFiles a.application {
padding: 2px;
padding-left: 20px;
background: url(../../sapphire/images/icons/application.png) no-repeat left center;
}

BIN
images/icons/application.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 464 B

BIN
images/icons/icon-jpg.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
images/icons/page_excel.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 817 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 591 B

BIN
images/icons/page_white_zip.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 386 B

BIN
images/icons/page_word.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 777 B

View File

@ -28,6 +28,8 @@ HasManyFileFieldAddButton.prototype = {
input.value = fileid;
text = document.createTextNode(name);
link = document.createElement('a');
link.appendChild(text);
removelink = document.createElement('a');
removelink.className = 'removeFile';
@ -35,7 +37,7 @@ HasManyFileFieldAddButton.prototype = {
li = document.createElement('li');
li.appendChild(input);
li.appendChild(text);
li.appendChild(link);
li.appendChild(removelink);
list.appendChild(li);
@ -90,10 +92,14 @@ HasManyFileFieldUploadButton.prototype = {
ids = serverData.match(idregex);
fileid = ids[1];
nameregex = /\/\* Names: ([A-Za-z0-9_. -]+) \*\//;
console.log(serverData);
nameregex = /\/\* Names: ([^\s]+) \*\//;
names = serverData.match(nameregex);
name = names[1];
console.log(name);
fieldid = this.parentNode.parentNode.id;
list = this.parentNode.parentNode.list;
@ -104,6 +110,8 @@ HasManyFileFieldUploadButton.prototype = {
input.value = fileid;
text = document.createTextNode(name);
link = document.createElement('a');
link.appendChild(text);
removelink = document.createElement('a');
removelink.className = 'removeFile';
@ -111,7 +119,7 @@ HasManyFileFieldUploadButton.prototype = {
li = document.createElement('li');
li.appendChild(input);
li.appendChild(text);
li.appendChild(link);
li.appendChild(removelink);
list.appendChild(li);