Assets

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.

Asset Lists can use subtle buttons to add actions, for example to remove a file from a list of files

Note

The Asset List should not be used for full file tree or document index views. Instead, use the Tree component.

Code

API: unstable
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" 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
                                                                    %>