diff --git a/doc/Structure.md b/doc/Structure.md index d3bad868..65957c7b 100644 --- a/doc/Structure.md +++ b/doc/Structure.md @@ -33,22 +33,92 @@ The full root level structure is as follows ``` Note: '+' marked lines are generated and aren't inherent to the repository -The 'assets' folder contains all required content not created for specifically -this UI project (e.g. image logos, fonts, etc.) +## assets/ +Contains all required content not created for specifically this UI project +(e.g. image logos, fonts, etc.) -The 'plugins' folder contains all plugin folders, natively designed or -third-party. Most everything important in the ui is a plugin. This design -allows for community involvemenet and customization to the maximum extent. -Plugins are designed as webpages and are automatically initialized in the UI's -startup by looking for a ./plugins/[PLUGIN_NAME]/index.html file. +## css/ +Contains css, both imported and developed in house. -'config.json' is a json created upon a user first opening the UI and tracks -things like window position, siad's hosted address, etc. +* `general.css` - Applies css rules to the general UI +* `plugin-standard.css` - Applies css rules to each plugin. Plugins only + optionally include this as a style tag in their `index.html` files. +* `font-awesome-min.css` - Allows the usage of [Font + Awesome](http://fontawesome.io/). The most common usage of these icons are to + denote buttons, particularly with the text to the right of the icon as so: +```html +
+``` +resulting in a button like this: . +* `roboto-condensed-min.css` - Most of the UI uses this font. It's minimalist + and easy to read when small but not bulky when large + +## doc/ +Contains any markdown files, except the README.md, such as this one. + +* `assets/` - Contains screenshots and images needed for specifically the + documents in doc/ + +## js/ +Contains all the javascript files that aren't plugin specific and make up the +functionality of the general UI. In this immediate folder level, there's: + +* `getSia.js` - ran upon the command `npm install`, downloads a Sia release to + use. It's mostly useful to automatically get said release onto a TravisCI + server. Otherwise, users generally shouldn't be using this file to download + Sia for security purposes. +* `mainjs/` - Contains any logic related to the main process, [a concept of + electron's](https://github.com/atom/electron/blob/master/docs/tutorial/quick-start.md#differences-between-main-process-and-renderer-process). + It's mostly startup logic. +* `rendererjs/` - Contains any logic related to the renderer process. Mostly + loading the UI, plugins, and various UI features like notifications. + +## [node_modules/](https://www.npmjs.com/) +Created upon `npm install`. Contains all npm package dependencies used by the UI +and its plugins. + +## [plugins/](/doc/Plugins.md) +Contains all plugin folders, natively designed or third-party. Plugins are +designed as webpages and are automatically initialized in the UI's startup by +looking for a `./plugins/[PLUGIN_NAME]/index.html` file. + +## [release/](/doc/DevelopmentFlow.md) +Created upon running `npm run release`. Contains release made to distribute to +users + +## [test/](/doc/Testing.md) +Tests written using [spectron](https://github.com/kevinsawicki/spectron). + +## config.json +Created upon a user opening the UI. It tracks things like window +position, siad's path, etc. It's managed by the main process and saved upon +opening/closing the UI + +## errors.log +Created upon a user opening the UI. Records error notifications for the UI. + +## index.html +The starting point of the renderer process. This file structures the layout of +the general UI and loads `/js/rendererjs/uiManager.js` and +`/js/rendererjs/pluginManager.js`. This is the only non-plugin html file since +Sia-UI is intended to be a one-page desktop app. -'index.js' initializes a browser window using 'index.html'. This is the only -non-plugin html file since Sia-UI is intended to be a one-page desktop app. +## index.js +The entry point of the app and main process. This: +* Initializes a browser window using 'index.html' +* Loads up a config.json +* Initializes siad, through the node wrapper, [sia.js](https://github.com/NebulousLabs/Nodejs-Sia) +* Takes advantage of many electron libraries to give a more OS-specific + experience -'package.json' contains most of the CLI commands we use to interact with the UI -and is an overall core tool to how npm and electron function. This should be -carefully examined. +## package.json +Contains many details of the project. The most important parts of this file are +its dependencies and devDependencies list as well as its scripts. See [A useful +guide about using NPM as a build +tool](http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/) for a +guide of how the scripts work. diff --git a/doc/assets/update-button.png b/doc/assets/update-button.png new file mode 100644 index 00000000..6ea58947 Binary files /dev/null and b/doc/assets/update-button.png differ