Design

The Asset component represents a range of assets such as files, directories, questions, answers and comments.

  • 01.03 Q4report.pdf1.87 mb
  • 02/path/to Important stuff
  • 1234 How do things work? Wondering William
  • 1234 Things work really well. Informed Ingrid
  • Things work for me too! Commenting Kim
  • Speak for yourself Disabled Dave
  • User
  • User Group

Configuration

  • Each Asset type shows information related to that type, eg. file name, number, format and size
  • The Asset name can be a link
  • The entire Asset can be disabled
  • Assets can be contained in an Asset List, for example to display a list of attachments. However note that Asset List should not be used for full file tree or document index views, which should use the Tree component.
  • Asset Lists can use subtle buttons to add actions, for example to remove a file from a list of files

Code

Example Note Code
standard text document.txt File with icon and name 

                                                                                  <span class="ace-asset ace-asset-file">
                                                                                    <span class="ace-asset-type ace-icon ace-icon-document-text">
                                                                                      standard text document.txt
                                                                                    </span>
                                                                                    <span class="ace-asset-name">standard text document.txt</span>
                                                                                  </span>

                                                                                  <%
                                                                                  ace.File(Array(_
                                                                                    "name", "standard text document.txt",_
                                                                                    "type", "text"_
                                                                                  ))
                                                                                  %>
01.02 numbered video document.mkv File with icon, number and name 

                                                                                  <span class="ace-asset ace-asset-file">
                                                                                    <span class="ace-asset-type ace-icon ace-icon-document-video">
                                                                                      numbered video document.mvk
                                                                                    </span>
                                                                                    <span class="ace-asset-number">01.02</span>
                                                                                    <span class="ace-asset-name">numbered video document.mvk</span>
                                                                                  </span>

                                                                                  <%
                                                                                  ace.File(Array(_
                                                                                    "name", "numbered video document.mkv",_
                                                                                    "type", "video",_
                                                                                    "number", "01.02"_
                                                                                  ))
                                                                                  %>
01.03/usr/local/bin/ruby ruby1.87 mb File with all attributes 

                                                                                  <span class="ace-asset ace-asset-file">
                                                                                    <span class="ace-asset-type ace-icon ace-icon-document-generic">ruby</span>
                                                                                    <span class="ace-asset-number">01.03</span>
                                                                                    <span class="ace-asset-path">/usr/local/bin/ruby</span>
                                                                                    <span class="ace-asset-name">ruby</span>
                                                                                    <span class="ace-asset-size">1.87 mb</span>
                                                                                  </span>

                                                                                  <%
                                                                                  ace.File(Array(_
                                                                                    "name", "ruby",_
                                                                                    "type", "generic",_
                                                                                    "number", "01.03",_
                                                                                    "size", "1.87 mb",_
                                                                                    "path", "/usr/local/bin/ruby"_
                                                                                  ))
                                                                                  %>
v0.8.0/usr/local/bin/psci purescript13.4 MB Disabled file 

                                                                                  <span class="ace-asset ace-asset-file ace-asset-disabled">
                                                                                    <span class="ace-asset-type ace-icon ace-icon-document-generic">purescript</span>
                                                                                    <span class="ace-asset-number">v0.8.0</span>
                                                                                    <span class="ace-asset-path">/usr/local/bin/psci</span>
                                                                                    <a class="ace-asset-name ace-link" href="http://purescript.org">purescript</span>
                                                                                    <span class="ace-asset-size">13.4 MB</span>
                                                                                  </span>

                                                                                  <%
                                                                                  ace.File(Array(_
                                                                                    "name", "purescript",_
                                                                                    "type", "generic",_
                                                                                    "href": "http://purescript.org",_
                                                                                    "disabled", "disabled",_
                                                                                    "number", "v0.8.0",_
                                                                                    "size", "13.4 MB",_
                                                                                    "path", "/usr/local/bin/psci"_
                                                                                  ))
                                                                                  %>
01 Important stuff Directory 

                                                                                  <span class="ace-asset ace-asset-directory">
                                                                                    <span class="ace-asset-type ace-icon ace-icon-objects-folder">Important stuff</span>
                                                                                    <span class="ace-asset-number">01</span>
                                                                                    <span class="ace-asset-name">Important stuff</span>
                                                                                  </span>

                                                                                  ace.Directory(Array(_
                                                                                    "name", "Important stuff",_
                                                                                    "number", "01"_
                                                                                  ))
02/path/to/Docs Important stuff24.3 gb All directory attributes 

                                                                                  <span class="ace-asset ace-asset-directory">
                                                                                    <span class="ace-asset-type ace-icon ace-icon-objects-folder">Important stuff</span>
                                                                                    <span class="ace-asset-number">02</span>
                                                                                    <span class="ace-asset-path">/path/to/Docs</span>
                                                                                    <span class="ace-asset-name">Important stuff</span>
                                                                                    <span class="ace-asset-size">24.3 gb</span>
                                                                                  </span>

                                                                                  <%
                                                                                  ace.Directory(Array(_
                                                                                    "name", "Important stuff",_
                                                                                    "number", "02",_
                                                                                    "number", "24.3 gb",_
                                                                                    "path", "/home/john/Documents/Important stuff"_
                                                                                  ))
                                                                                  %>
1234 How do things work? Wondering William Question with number and Author 

                                                                                  <span class="ace-asset ace-asset-question">
                                                                                    <span class="ace-icon ace-icon-objects-question ace-asset-type"></span>
                                                                                    <span class="ace-asset-number">1234</span>
                                                                                    <span class="ace-asset-name">How do things work?</span>
                                                                                    <span class="ace-asset-author">Wondering William</span>
                                                                                  </span>

                                                                                  <%
                                                                                  ace.PresetAsset(Array(_
                                                                                    "type", "question",_
                                                                                    "name", "How do things work?",_
                                                                                    "author", "Wondering William",_
                                                                                    "number", "1234"_
                                                                                  ))
                                                                                  %>
1234 Things work really well. Informed Ingrid Answer with number and Author 

                                                                                  <span class="ace-asset ace-asset-answer">
                                                                                    <span class="ace-icon ace-icon-objects-subject ace-asset-type"></span>
                                                                                    <span class="ace-asset-number">1234</span>
                                                                                    <span class="ace-asset-name">Things work really well.</span>
                                                                                    <span class="ace-asset-author">Informed Ingrid</span>
                                                                                  </span>

                                                                                  <%
                                                                                  ace.PresetAsset(Array(_
                                                                                    "type", "answer",_
                                                                                    "name", "Things work really well.",_
                                                                                    "author", "Informed Ingrid",_
                                                                                    "number", "1234"_
                                                                                  ))
                                                                                  %>
Things work for me too! Commenting Kim Comment with Author 

                                                                                  <span class="ace-asset ace-asset-comment">
                                                                                    <span class="ace-icon ace-icon-objects-subject ace-asset-type"></span>
                                                                                    <span class="ace-asset-name">Things work for me too!</span>
                                                                                    <span class="ace-asset-author">Commenting Kim</span>
                                                                                  </span>

                                                                                  <%
                                                                                  ace.PresetAsset(Array(_
                                                                                    "type", "comment",_
                                                                                    "name", "Things work for me too!",_
                                                                                    "author", "Commenting Kim"_
                                                                                  ))
                                                                                  %>
User User 

                                                                                  <span class="ace-asset ace-asset-user">
                                                                                    <span class="ace-icon ace-icon-objects-user ace-asset-type"></span>
                                                                                    <span class="ace-asset-name">User</span>
                                                                                  </span>

                                                                                  <%
                                                                                  ace.PresetAsset(Array(_
                                                                                    "type", "user",_
                                                                                    "name", "User Name"_
                                                                                  ))
                                                                                  %>
User Group User Group. If User Group colours are required, apply with inline CSS or a custom class. 

                                                                                <span class="ace-asset ace-asset-user-group">
                                                                                  <span class="ace-icon ace-icon-objects-usergroup ace-asset-type" style="color: #fec0ff"></span>
                                                                                  <span class="ace-asset-name">User Group</span>
                                                                                </span>            

                                                                                <%
                                                                                ace.PresetAsset(Array(_
                                                                                  "type", "user-group",_
                                                                                  "name", "User Group",_
                                                                                  "iconColour", "#fec0ff"_
                                                                                ))
                                                                                %>

Asset List with buttons:

  • 01.01 Q1report.pdf1.87 mb
  • 01.02 Q2report.pdf1.01 mb
  • 01.03 Q3report.pdf2.11 mb
  • 01.04 Q4report.pdf1.99 mb

Asset List without buttons:

  • 01.03 Q4report.pdf1.87 mb
  • 02/home/john/Documents/Important stuff Important stuff24.3 gb
  • 01.03 Q4report.pdf1.87 mb
  • 02/home/john/Documents/Important stuff Important stuff24.3 gb
  • 1234 Question name (title) Author
  • 1234 Answer name (title) Author
  • Comment name (title) AuthorA few minutes ago
Asset list

Asset lists are simple lists. Each list item enclose instances of Asset and (optionally) one or more Subtle Buttons:


                                                                                    <ul class="ace-asset-list">
                                                                                          <li>
                                                                                            <!-- 1 x Asset -->
                                                                                            <!-- Optional: Button(s) set to type 'subtle' -->
                                                                                          </li>
                                                                                    </ul>

                                                                                <%
                                                                                ace.AssetList(Array())
                                                                                  ace.AssetItem(Array())
                                                                                    ace.File(Array(_
                                                                                      "name", "doc.pdf",_
                                                                                      "type", "acrobat",_
                                                                                      "number", "10.01",_
                                                                                      "size", "1.86 mb",_
                                                                                      "href", "#",_
                                                                                      "path", "/home/doc.pdf"_
                                                                                    ))
                                                                                  ace.AssetItemEnd
                                                                                  ace.AssetItem(Array())
                                                                                    ace.File(Array(_
                                                                                      "name", "excel.xlsx",_
                                                                                      "type", "excel",_
                                                                                      "number", "10.02",_
                                                                                      "size", "1.86 mb",_
                                                                                      "href", "#",_
                                                                                      "path", "/home/excel.xlsx"_
                                                                                    ))
                                                                                    ace.Button(Array(_
                                                                                      "type", "subtle",_
                                                                                      "icon", "action-remove",_
                                                                                      "iconText", "remove"_
                                                                                    ))
                                                                                  ace.AssetItemEnd
                                                                                ace.AssetListEnd
                                                                                %>