Commit b32d7761 authored by Danny SMc's avatar Danny SMc

Added test

parent c987668b
# SonarOS by Codelix
> SonarOS is a powerful desktop management platform, built on top of web technologies - here you can interact with a remote computer, as if it was a real computer.
### Default Components
Below is a explanation of all components that come with SonarOS and how they interact.
| Name | Description | Version | Access |
|------|-------------|---------|--------|
| Sonar Global | The sonar global object is a precompiled full library that contains all the JS code to build yourself a platform. All extensions, modules and components go here directly. | `0.0.1` | `sonar` |
| Sonar Core | The core component of sonar comes with all core framework functions but also most of the inner workings and linkings of all modules. | `0.0.1` | `sonar.core` |
| Virtual File System | The VFS is a file system over XHR which allows you to modify and change files as if they were real files, but instead loaded via virtual file system. | `0.0.1` | `sonar.vfs` |
| Graphics User Interface | The GUI component is all about creating frames/panels on the web, allowing us to call in functions as and when is required. | `0.0.1` | `sonar.gui` |
| User Accounts | The user account management is for managing logged in users, and allowing multiple users on the platform. | `0.0.1` | `sonar.accounts` |
| Permissions | The permissions module is an extension to the account manager, and allows you to define permissions for users to interact with specific things, each permission works by following the call for it. | `0.0.1` | `sonar.accounts.permissions` |
| Event Manager | The event manager is used for event subscribing and event dispatching. Allowing applications to dispatch events for other panels or components to understand. | `0.0.1` | `sonar.events` |
| Network | The network component is all about websocket, XHR and fetch and can manage connections and run requests, you may use this in your own custom modules. | `0.0.1` | `sonar.network` |
| Extensions | The extensions component is all based around extending functionality, therefore you can use the following to install new components, plugins, modules, themes. | `0.0.1` | `sonar.extensions` |
| Theme Manager | The theme manager is a dynamic stylesheet loader, and will allow themes to be installed and changed as and when is needed. | `0.0.1` | `sonar.themes` |
| Menu Manager | The menu manager is the top core navigation item, for managing your system, this includes links to loaded applications and more. | `0.0.1` | `sonar.menu` |
| Settings | The settings module uses a JSON encoded file to store all settings for a specific user, this could be the defined theme, fonts and more. | `0.0.1` | `sonar.settings` |
| Packages | The package library is built to install packages, these packages could be applications, plugins, modules, or even core updates. | `0.0.1` | `sonar.packages` |
| About | The about module will give information about the platform, version of all packages, module status and as much OS based information as it can. | `0.0.1` | `sonar.about` |
---
Structure:
- package.json
- readme.md
- tsconfig.json
+ source
+ kernal
- bootstrap.ts
- framework.ts
- information.ts
+ components
- network.ts
- vfs.ts
- gui.ts
- accounts.ts
- permissions.ts
- events.ts
- extensions.ts
- themes.ts
- menu.ts
- settings.ts
- packages.ts
+ docs
+ OPERATING SYSTEM
+ MENU
+ DESKTOP
\ No newline at end of file
......@@ -10737,6 +10737,11 @@
"integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==",
"dev": true
},
"v-click-outside": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/v-click-outside/-/v-click-outside-2.1.3.tgz",
"integrity": "sha512-8d11/fN+nkSPeor87K8OtGc/lDbRwbUiFwdzxQEGidlXt6eko3gIgRM7ghgi4p/zohF3Ja9hAaydAajV3gnlPQ=="
},
"validate-npm-package-license": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
......
......@@ -9,6 +9,7 @@
"dependencies": {
"core-js": "^2.6.5",
"register-service-worker": "^1.6.2",
"v-click-outside": "^2.1.3",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>sonaros</title>
</head>
<body>
<noscript>
<strong>We're sorry but sonaros doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>SonarOS | Destop</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<noscript>
<strong>We're sorry but Sonar OS doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
<div id="app">
<router-view />
</div>
</template>
<style lang="scss">
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
@import "assets/styles/core.scss";
</style>
\ No newline at end of file
/*
Name: Auction Marketer Base
Author: Auction Marketer
Contributions: Danny, Jack, Marcin
Copyright (C) 2018 Auction Marketer - All Rights Reserved
*/
body {
[v-cloak] {
display: none;
}
}
body, body *, html * {
font-family: $primary-font-family;
}
body.site {
border-top: none;
padding: 0;
background-color: #ffffff;
.container {
max-width: 1200px;
border: none;
padding: 0;
box-shadow: none;
border-radius: 0;
// overriding flexbox responsive switch
@include media-query(max, 1230px) {
width: 100%;
padding: 0px 15px;
}
}
p {
font-size: 16px;
}
h1 {
font-size: 50px;
@include media-query(max, 769) {
font-size: 40px;
}
@include media-query(max, 450) {
font-size: 30px;
}
&.sppb-addon-title {
text-align: center;
padding-bottom: 30px;
}
}
ul {
margin-left: 0;
}
}
button {
border: none;
padding: 0;
vertical-align: top;
@include prefix(appearance, none);
}
input[type="text"] {
padding: 8px;
margin-bottom: 0;
border-radius: 0;
box-shadow: none;
cursor: pointer;
height: auto;
}
select {
// background-image: url('./icons/caret-down-solid.svg');
background-size: 12px;
background-position: 97%, 50%;
background-repeat:no-repeat;
padding-right: 16px;
@include prefix(appearance, none);
@include target-browser('IE') {
background-size: 12px 7px;
}
&::-ms-expand {
display: none;
}
}
textarea:focus, input:focus, button:focus {
outline: none;
}
ul.nav {
margin-bottom: 0;
}
[v-cloak] {
display: none !important;
}
.sp-pagebuilder-page-edit {
display: none !important;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
.fade-enter-active, .fade-leave-active {
@include prefix(transition, opacity 0.5s ease-in-out);
}
.row::before {
display: none;
}
.row::after {
display: none;
}
.slick-initialized .slick-slide {
outline: none;
}
\ No newline at end of file
/*
Name: Auction Marketer Buttons
Author: Auction Marketer
Contributions: Danny, Jack, Marcin
Copyright (C) 2018 Auction Marketer - All Rights Reserved
*/
/*====================================================================================
// Buttons
====================================================================================*/
.primary-button {
@include button($tertiary-font-colour, $primary-colour);
}
.primary-button-inverted {
@include button($tertiary-font-colour, $primary-colour, 'inverted');
}
.secondary-button {
@include button($primary-font-colour, $secondary-colour, 'dark');
border: 1px solid $primary-colour;
color: $primary-colour;
}
.secondary-button-inverted {
@include button($primary-font-colour, $secondary-colour, 'inverted');
}
.tertiary-button {
@include button($primary-font-colour, $tertiary-colour, 'dark');
}
.tertiary-button-inverted {
@include button($primary-font-colour, $tertiary-colour, 'inverted');
}
// Google Fonts: PT Serif, Open Sans
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700|PT+Serif:400,400i,700,700i&display=swap');
\ No newline at end of file
@import "fonts";
@import "vars";
@import "mixins";
@import "images";
@import "reset";
@import "normalize";
@import "base";
@import "buttons";
\ No newline at end of file
/*
Name: Auction Marketer Mixins
Author: Auction Marketer
Contributions: Danny, Jack, Marcin
Copyright (C) 2018 Auction Marketer - All Rights Reserved
*/
/*====================================================================================
// SCSS Mixins
====================================================================================*/
/*====================================================================================
// Colour the elements placeholder
// Example: @include placeholder{ // Content };
====================================================================================*/
@mixin placeholder {
&::-webkit-input-placeholder {@content}
&:-moz-placeholder {@content}
&::-moz-placeholder {@content}
&:-ms-input-placeholder {@content}
}
/*====================================================================================
// Create prefixes for example for transitions
// Example: @include prefix{ transition, all 0.2s ease-in-out };
====================================================================================*/
@mixin prefix($property, $value...) {
-webkit-#{$property}: $value;
-moz-#{$property}: $value;
-ms-#{$property}: $value;
-o-#{$property}: $value;
#{$property}: $value;
}
/*====================================================================================
// Clearfix
// Example: @include clearfix();
====================================================================================*/
@mixin clearfix {
&:before, &:after {
content: "";
display: table;
}
&:after {
clear: both;
}
zoom: 1;
}
/*====================================================================================
// Media Queries
// Example: @include media-query(min, 900px) {content}
====================================================================================*/
@mixin media-query($type, $breakpoint: 600px) {
@if $type == "min" {
@media screen and (min-width: $breakpoint) { @content }
}
@else if $type == "max" {
@media screen and (max-width: $breakpoint - 1px) { @content }
}
@else if $type == "palm" {
@media screen and (max-width: $lap-start - 1px) { @content }
}
@else if $type == "lap" {
@media screen and (min-width: $lap-start) { @content }
}
@else if $type == "desk" {
@media screen and (min-width: $desk-start) { @content }
}
@else if $type == "wide" {
@media screen and (min-width: $wide-start) { @content }
}
}
/*====================================================================================
// Media Queries same as above but between two values
// Example: @include media-query-bracket(640px, 960px){}
====================================================================================*/
@mixin media-query-bracket($from: 0, $to: $lap-start) {
@if $to > $from {
@media screen and (min-width: $from) and (max-width: $to - 1px) { @content }
}
}
/*====================================================================================
// Converts pixels to percents
// Example: @include pxtopercent(500px, 1000px);
====================================================================================*/
@mixin pxtopercent($child, $parent) {
width:round(($child / $parent) * 100%);
}
/*====================================================================================
// Vertical Align anything
// Example: @include verticalalign();
====================================================================================*/
@mixin verticalalign {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
/*====================================================================================
// Break the word if the containing div is too small
// Example: @include word-wrap();
====================================================================================*/
@mixin wordwrap {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
word-break: break-word;
}
/*====================================================================================
// Add ellipsis onto end of text if overflows the height of element
// Example: @include ellipsis();
====================================================================================*/
@mixin ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*====================================================================================
// Targets browsers specifically.
// Example: @include target-browser('Chrome') { ... };
====================================================================================*/
@mixin target-browser($browser) {
@if $browser == "IE" {
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { @content }
}
@else if $browser == "FireFox" {
@-moz-document url-prefix() { @content }
}
@else if $browser == "Chrome" {
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { @content }
}
@else if $browser == "Safari" {
/* Safari 10.1+ (alternate method) */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0) {
@content
}
/* Safari 6.1-10.0 [not 10.1+] */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
@content
}
/* Safari 6.1-7.0 */
@media not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) {
@content
}}
}
}
/*====================================================================================
// Create default button setup
// Example:
// @include button(white, #203963);` - This is a default button
// @include button(#203963, white, 'true');` - This is a inverse button, uses the text colour as border colour
====================================================================================*/
@mixin button($txtColour: white, $bgColour: #203963, $option: 'none') {
@if $option == "inverted" {
border: 1px solid $txtColour;
background-color: transparent;
color: $txtColour;
}
@if $option == "none" {
border: 1px solid $bgColour;
background-color: $bgColour;
color: $txtColour;
}
border-radius: 3px;
cursor: pointer;
display: inline-block;
font-size: 16px;
font-weight: $secondary-font-weight;
line-height: 1.1;
padding: 5px 15px;
text-align: center;
text-decoration: none;
text-transform: capitalize;
vertical-align: middle;
width: auto;
@include prefix(transition, background-color 0.25s ease-in-out 0s, color 0.25s ease-in-out 0s, border-color 0.25s ease-in-out 0s);
&:hover, &:active, &:focus {
background-color: $txtColour;
color: $bgColour;
text-decoration: none;
@if $option == "dark" {
border-color: $txtColour;
}
}
}
/*====================================================================================
// Style the scrollbar (Only works on Chrome)
// Example: @include scrollbar('track') { @styles };
====================================================================================*/
@mixin scrollbar($part) {
@if $part == "track" {
&::-webkit-scrollbar-track { @content }
}
@else if $part == "bar" {
&::-webkit-scrollbar { @content }
}
@else if $part == "thumb" {
&::-webkit-scrollbar-thumb { @content }
}
}
/*
Name: Auction Marketer Normalize
Author: Auction Marketer
Contributions: Danny, Jack, Marcin
Copyright (C) 2018 Auction Marketer - All Rights Reserved
*/
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**