This repository has been archived by the owner on Nov 20, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(getting started): better getting started guide (#1651)
- Loading branch information
Showing
12 changed files
with
981 additions
and
346 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,82 +1,62 @@ | ||
| <!-- | ||
| This is a document you can use when you start building the page that will contain | ||
| one or more Fine Uploader UI instances. A default template that can be customized | ||
| is located in the text/template script tag below. | ||
| Please see http://docs.fineuploader.com/features/styling.html for information | ||
| on how to customize this template. | ||
| --> | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <link href="client/fine-uploader-new.css" rel="stylesheet"> | ||
| <script src="client/fine-uploader.js"></script> | ||
| <script type="text/template" id="qq-template"> | ||
| <div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here"> | ||
| <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container"> | ||
| <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div> | ||
| This is a legacy template and is not meant to be used in new Fine Uploader integrated projects. | ||
| Read the "Getting Started Guide" at http://docs.fineuploader.com/quickstart/01-getting-started.html | ||
| if you are not yet familiar with Fine Uploader UI. | ||
| --> | ||
| <script type="text/template" id="qq-template"> | ||
| <div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here"> | ||
| <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container"> | ||
| <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div> | ||
| </div> | ||
| <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone> | ||
| <span class="qq-upload-drop-area-text-selector"></span> | ||
| </div> | ||
| <div class="qq-upload-button-selector qq-upload-button"> | ||
| <div>Upload a file</div> | ||
| </div> | ||
| <span class="qq-drop-processing-selector qq-drop-processing"> | ||
| <span>Processing dropped files...</span> | ||
| <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span> | ||
| </span> | ||
| <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals"> | ||
| <li> | ||
| <div class="qq-progress-bar-container-selector"> | ||
| <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div> | ||
| </div> | ||
| <span class="qq-upload-spinner-selector qq-upload-spinner"></span> | ||
| <span class="qq-upload-file-selector qq-upload-file"></span> | ||
| <span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span> | ||
| <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text"> | ||
| <span class="qq-upload-size-selector qq-upload-size"></span> | ||
| <button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button> | ||
| <button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button> | ||
| <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button> | ||
| <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span> | ||
| </li> | ||
| </ul> | ||
|
|
||
| <dialog class="qq-alert-dialog-selector"> | ||
| <div class="qq-dialog-message-selector"></div> | ||
| <div class="qq-dialog-buttons"> | ||
| <button type="button" class="qq-cancel-button-selector">Close</button> | ||
| </div> | ||
| <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone> | ||
| <span class="qq-upload-drop-area-text-selector"></span> | ||
| </dialog> | ||
|
|
||
| <dialog class="qq-confirm-dialog-selector"> | ||
| <div class="qq-dialog-message-selector"></div> | ||
| <div class="qq-dialog-buttons"> | ||
| <button type="button" class="qq-cancel-button-selector">No</button> | ||
| <button type="button" class="qq-ok-button-selector">Yes</button> | ||
| </div> | ||
| <div class="qq-upload-button-selector qq-upload-button"> | ||
| <div>Upload a file</div> | ||
| </dialog> | ||
|
|
||
| <dialog class="qq-prompt-dialog-selector"> | ||
| <div class="qq-dialog-message-selector"></div> | ||
| <input type="text"> | ||
| <div class="qq-dialog-buttons"> | ||
| <button type="button" class="qq-cancel-button-selector">Cancel</button> | ||
| <button type="button" class="qq-ok-button-selector">Ok</button> | ||
| </div> | ||
| <span class="qq-drop-processing-selector qq-drop-processing"> | ||
| <span>Processing dropped files...</span> | ||
| <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span> | ||
| </span> | ||
| <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals"> | ||
| <li> | ||
| <div class="qq-progress-bar-container-selector"> | ||
| <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div> | ||
| </div> | ||
| <span class="qq-upload-spinner-selector qq-upload-spinner"></span> | ||
| <span class="qq-upload-file-selector qq-upload-file"></span> | ||
| <span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span> | ||
| <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text"> | ||
| <span class="qq-upload-size-selector qq-upload-size"></span> | ||
| <button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button> | ||
| <button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button> | ||
| <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button> | ||
| <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span> | ||
| </li> | ||
| </ul> | ||
|
|
||
| <dialog class="qq-alert-dialog-selector"> | ||
| <div class="qq-dialog-message-selector"></div> | ||
| <div class="qq-dialog-buttons"> | ||
| <button type="button" class="qq-cancel-button-selector">Close</button> | ||
| </div> | ||
| </dialog> | ||
|
|
||
| <dialog class="qq-confirm-dialog-selector"> | ||
| <div class="qq-dialog-message-selector"></div> | ||
| <div class="qq-dialog-buttons"> | ||
| <button type="button" class="qq-cancel-button-selector">No</button> | ||
| <button type="button" class="qq-ok-button-selector">Yes</button> | ||
| </div> | ||
| </dialog> | ||
|
|
||
| <dialog class="qq-prompt-dialog-selector"> | ||
| <div class="qq-dialog-message-selector"></div> | ||
| <input type="text"> | ||
| <div class="qq-dialog-buttons"> | ||
| <button type="button" class="qq-cancel-button-selector">Cancel</button> | ||
| <button type="button" class="qq-ok-button-selector">Ok</button> | ||
| </div> | ||
| </dialog> | ||
| </div> | ||
| </script> | ||
|
|
||
| <title>Fine Uploader default UI</title> | ||
| </head> | ||
| <body> | ||
|
|
||
| </body> | ||
| </html> | ||
|
|
||
|
|
||
|
|
||
| </dialog> | ||
| </div> | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,101 +1,82 @@ | ||
| <!-- | ||
| This is a document you can use when you start building the page that will contain | ||
| one or more Fine Uploader UI instances. A gallery template that can be customized | ||
| is located in the text/template script tag below. | ||
| Read the "Getting Started Guide" at http://docs.fineuploader.com/quickstart/01-getting-started.html | ||
| if you are not yet familiar with Fine Uploader UI. | ||
| Please see http://docs.fineuploader.com/features/styling.html for information | ||
| on how to customize this template. | ||
| --> | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <link href="client/fineuploader-gallery.css" rel="stylesheet"> | ||
| <script src="client/fine-uploader.js"></script> | ||
| <script type="text/template" id="qq-template"> | ||
| <div class="qq-uploader-selector qq-uploader qq-gallery" qq-drop-area-text="Drop files here"> | ||
| <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container"> | ||
| <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div> | ||
| </div> | ||
| <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone> | ||
| <span class="qq-upload-drop-area-text-selector"></span> | ||
| </div> | ||
| <div class="qq-upload-button-selector qq-upload-button"> | ||
| <div>Upload a file</div> | ||
| </div> | ||
| <span class="qq-drop-processing-selector qq-drop-processing"> | ||
| <span>Processing dropped files...</span> | ||
| <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span> | ||
| </span> | ||
| <ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals"> | ||
| <li> | ||
| <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span> | ||
| <div class="qq-progress-bar-container-selector qq-progress-bar-container"> | ||
| <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div> | ||
| </div> | ||
| <span class="qq-upload-spinner-selector qq-upload-spinner"></span> | ||
| <div class="qq-thumbnail-wrapper"> | ||
| <img class="qq-thumbnail-selector" qq-max-size="120" qq-server-scale> | ||
| </div> | ||
| <button type="button" class="qq-upload-cancel-selector qq-upload-cancel">X</button> | ||
| <button type="button" class="qq-upload-retry-selector qq-upload-retry"> | ||
| <span class="qq-btn qq-retry-icon" aria-label="Retry"></span> | ||
| Retry | ||
| </button> | ||
|
|
||
| <div class="qq-file-info"> | ||
| <div class="qq-file-name"> | ||
| <span class="qq-upload-file-selector qq-upload-file"></span> | ||
| <span class="qq-edit-filename-icon-selector qq-btn qq-edit-filename-icon" aria-label="Edit filename"></span> | ||
| </div> | ||
| <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text"> | ||
| <span class="qq-upload-size-selector qq-upload-size"></span> | ||
| <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete"> | ||
| <span class="qq-btn qq-delete-icon" aria-label="Delete"></span> | ||
| </button> | ||
| <button type="button" class="qq-btn qq-upload-pause-selector qq-upload-pause"> | ||
| <span class="qq-btn qq-pause-icon" aria-label="Pause"></span> | ||
| </button> | ||
| <button type="button" class="qq-btn qq-upload-continue-selector qq-upload-continue"> | ||
| <span class="qq-btn qq-continue-icon" aria-label="Continue"></span> | ||
| </button> | ||
| </div> | ||
| </li> | ||
| </ul> | ||
|
|
||
| <dialog class="qq-alert-dialog-selector"> | ||
| <div class="qq-dialog-message-selector"></div> | ||
| <div class="qq-dialog-buttons"> | ||
| <button type="button" class="qq-cancel-button-selector">Close</button> | ||
| --> | ||
| <script type="text/template" id="qq-template"> | ||
| <div class="qq-uploader-selector qq-uploader qq-gallery" qq-drop-area-text="Drop files here"> | ||
| <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container"> | ||
| <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div> | ||
| </div> | ||
| <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone> | ||
| <span class="qq-upload-drop-area-text-selector"></span> | ||
| </div> | ||
| <div class="qq-upload-button-selector qq-upload-button"> | ||
| <div>Upload a file</div> | ||
| </div> | ||
| <span class="qq-drop-processing-selector qq-drop-processing"> | ||
| <span>Processing dropped files...</span> | ||
| <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span> | ||
| </span> | ||
| <ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals"> | ||
| <li> | ||
| <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span> | ||
| <div class="qq-progress-bar-container-selector qq-progress-bar-container"> | ||
| <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div> | ||
| </div> | ||
| </dialog> | ||
|
|
||
| <dialog class="qq-confirm-dialog-selector"> | ||
| <div class="qq-dialog-message-selector"></div> | ||
| <div class="qq-dialog-buttons"> | ||
| <button type="button" class="qq-cancel-button-selector">No</button> | ||
| <button type="button" class="qq-ok-button-selector">Yes</button> | ||
| <span class="qq-upload-spinner-selector qq-upload-spinner"></span> | ||
| <div class="qq-thumbnail-wrapper"> | ||
| <img class="qq-thumbnail-selector" qq-max-size="120" qq-server-scale> | ||
| </div> | ||
| </dialog> | ||
| <button type="button" class="qq-upload-cancel-selector qq-upload-cancel">X</button> | ||
| <button type="button" class="qq-upload-retry-selector qq-upload-retry"> | ||
| <span class="qq-btn qq-retry-icon" aria-label="Retry"></span> | ||
| Retry | ||
| </button> | ||
|
|
||
| <dialog class="qq-prompt-dialog-selector"> | ||
| <div class="qq-dialog-message-selector"></div> | ||
| <input type="text"> | ||
| <div class="qq-dialog-buttons"> | ||
| <button type="button" class="qq-cancel-button-selector">Cancel</button> | ||
| <button type="button" class="qq-ok-button-selector">Ok</button> | ||
| <div class="qq-file-info"> | ||
| <div class="qq-file-name"> | ||
| <span class="qq-upload-file-selector qq-upload-file"></span> | ||
| <span class="qq-edit-filename-icon-selector qq-btn qq-edit-filename-icon" aria-label="Edit filename"></span> | ||
| </div> | ||
| <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text"> | ||
| <span class="qq-upload-size-selector qq-upload-size"></span> | ||
| <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete"> | ||
| <span class="qq-btn qq-delete-icon" aria-label="Delete"></span> | ||
| </button> | ||
| <button type="button" class="qq-btn qq-upload-pause-selector qq-upload-pause"> | ||
| <span class="qq-btn qq-pause-icon" aria-label="Pause"></span> | ||
| </button> | ||
| <button type="button" class="qq-btn qq-upload-continue-selector qq-upload-continue"> | ||
| <span class="qq-btn qq-continue-icon" aria-label="Continue"></span> | ||
| </button> | ||
| </div> | ||
| </dialog> | ||
| </div> | ||
| </script> | ||
|
|
||
| <title>Fine Uploader Gallery UI</title> | ||
| </head> | ||
| <body> | ||
|
|
||
| </body> | ||
| </html> | ||
| </li> | ||
| </ul> | ||
|
|
||
| <dialog class="qq-alert-dialog-selector"> | ||
| <div class="qq-dialog-message-selector"></div> | ||
| <div class="qq-dialog-buttons"> | ||
| <button type="button" class="qq-cancel-button-selector">Close</button> | ||
| </div> | ||
| </dialog> | ||
|
|
||
| <dialog class="qq-confirm-dialog-selector"> | ||
| <div class="qq-dialog-message-selector"></div> | ||
| <div class="qq-dialog-buttons"> | ||
| <button type="button" class="qq-cancel-button-selector">No</button> | ||
| <button type="button" class="qq-ok-button-selector">Yes</button> | ||
| </div> | ||
| </dialog> | ||
|
|
||
| <dialog class="qq-prompt-dialog-selector"> | ||
| <div class="qq-dialog-message-selector"></div> | ||
| <input type="text"> | ||
| <div class="qq-dialog-buttons"> | ||
| <button type="button" class="qq-cancel-button-selector">Cancel</button> | ||
| <button type="button" class="qq-ok-button-selector">Ok</button> | ||
| </div> | ||
| </dialog> | ||
| </div> | ||
| </script> |
Oops, something went wrong.