Add System.audio Class, Update KWS to v3.1 and Update an App(settings) [0.1.3]

Author: mtsgi

app/settings/about.html

@@ -1,5 +1,6 @@
 <script>
-    $( ".settings-kitv" ).text( System.version );
+        $( ".settings-kitv" ).text( System.version );
+    $( ".settings-kwsv" ).text( KWS.version );
     $( "#settings-license-1" ).load( "./system/jquery-ui-1.12.1/LICENSE.txt" );
     $( "#settings-license-2" ).load( "./fa/LICENSE.txt" );
 
@@ -19,9 +20,9 @@
 <h3><span class='fa fa-info-circle'></span> kitについて</h3>
 <div style='font-size:22px'>
     <img src="system/ico/logo.png" style="max-width: 100%;">
-    <br>バージョン<span class="settings-kitv"></span>
+    <h4>バージョン<span class="settings-kitv"></span></h4>
 </div>
-KWS 3.0.0<br>
+KWS <span class="settings-kwsv"></span><br>
 <a class="kit-hyperlink" onclick="latest_kit()">kitのアップデートを確認する</a>
 <div class="little">取得には時間がかかる場合があります</div>
 Based on <span class="fab fa-html5"></span>HTML5

app/settings/advanced.html

@@ -15,7 +15,7 @@
 </script>
 <a class='btn settings-default'><span class='fa fa-arrow-circle-left'></span>設定</a>
 <h3><span class='fa fa-sliders-h'></span> 高度な設定</h3>
-・システム環境変数
+<h4>システム環境変数</h4>
 <div class="little">不必要に変更を加えるとシステムが破損する可能性があります。</div>
 <input type='text' class='textbox' id='settings-envar-key' placeholder='編集対象'>
 <input type='text' class='textbox' id='settings-envar-val' placeholder='値'>

app/settings/default.html

@@ -1,23 +1,28 @@
 <div class='btn settings-about'>
+        <i class="fa fa-chevron-right"></i>
         kitについて
         <div class='little'>システム情報・ライセンス</div>
 </div>
-<h3><span class='fa fa-wrench'></span>システム設定</h3>
+<h4><span class='fa fa-wrench'></span>システム設定</h4>
 <div class='btn settings-user'>
+        <i class="fa fa-chevron-right"></i>
     ユーザー
     <div class='little'>ユーザー情報とセキュリティ</div>
 </div>
 <div class='btn settings-system'>
+        <i class="fa fa-chevron-right"></i>
     システム
     <div class='little'>アプリ管理・スタートアップ・時刻</div>
 </div>
 
-<h3><span class='fa fa-desktop'></span>デスクトップ</h3>
+<h4><span class='fa fa-desktop'></span>デスクトップ</h4>
 <div class='btn settings-wallpaper'>
+        <i class="fa fa-chevron-right"></i>
     壁紙
     <div class='little'>デスクトップ壁紙の設定</div>
 </div>
 <div class='btn settings-theme'>
+        <i class="fa fa-chevron-right"></i>
     テーマ
     <div class='little'>テーマ設定・フォント設定</div>
 </div>

app/settings/define.json

@@ -2,7 +2,7 @@
     "id": "settings",
     "name": "設定",
     "icon": "icon.png",
-    "version": "2.0.0",
+    "version": "3.0.0",
     "author": "kit",
 
     "view": "default.html",

app/settings/settings.css

@@ -1,7 +1,22 @@
 .winc-settings{
     padding: 8px;
 }
-
+.window .winc-settings .textbox{
+    width: calc(100% - 70px);
+}
+.winc-settings h4{
+    font-size: 18px;
+    margin: 10px 0;
+    border-left: 10px solid dodgerblue;
+    padding: 2px 6px;
+    font-weight: 400;
+    box-shadow: 0px 1px 5px 0 rgba(0,0,0,.15);
+}
+.winc-settings .btn .fa-chevron-right{
+    float: right;
+    position: relative;
+    top: 15px;
+}
 .settings-wallpapers{
     text-align: center;
     display: inline-block;
@@ -20,11 +35,17 @@
 
 .settings-default{
     float: left;
+    font-size: 18px;
     margin-right: 10px;
 }
 
 .winc-settings h3{
-    padding: 5px 0px;
+    text-align: right;
+    padding: 0px;
+    font-size: 34px;
+    font-weight: 100;
+    border-bottom: 1px solid #909090;
+    margin-bottom: 20px;
 }
 .winc-settings .settings-license-area{
     background: silver;

app/settings/system.html

@@ -7,23 +7,23 @@
 <h3>
     <span class='fa fa-cog'></span> システム設定
 </h3>
-<span class='fa fa-running'></span>スタートアップ<br>
+<h4><span class='fa fa-running'></span>スタートアップ</h4>
 <div class="little">
         システムの起動時に自動的に起動するアプリケーションの名前を入力します。複数の場合は半角カンマで区切ります(動作が不安定になる場合があります)。
 </div>
 <input type='text' class='textbox' id='settings-startup'>
 <a class='kit-button settings-startup-set'>設定</a>
 <br>
-<span class='fa fa-clock'></span>時刻<br>
+<h4><span class='fa fa-clock'></span>時刻</h4>
 <div class="little">
     時刻はSystem.timeオブジェクトに格納されています。<br>
     設定された時刻：<span class="os-time"></span>
 </div>
-<span class='fa fa-window-restore'></span>アプリ管理<br>
+<h4><span class='fa fa-window-restore'></span>アプリ管理</h4>
 <div class="little">
     アプリケーションの管理は<a onclick="launch('appman')" class="kit-hyperlink">アプリ管理</a>から実行してください。
 </div>
-<span class='fa fa-shield-alt'></span>セーフブート
+<h4><span class='fa fa-shield-alt'></span>セーフブート</h4>
 <div class="little">
     <span id="settings-issafe" style="color: blue;"></span>
     セーフモードで起動する場合は、<a class="kit-hyperlink" onclick="location.href = '?safe=true'">ここをクリック</a>またはkitにパラメータ<strong>safe=true</strong>を付与して再起動します。

app/settings/theme.html

@@ -4,14 +4,14 @@
         $("#kit-theme-file").attr("href", "./system/theme/" + localStorage.getItem("kit-theme") );
         $("#desktop-" + currentDesktop).show();
     }
-    $("#settings-theme-path-set").on("click", function(){
-        settings_theme( $("#settings-theme-path")[0].val() );
+    $(".settings-theme-path-set").on("click", function(){
+        settings_theme( $("#settings-theme-path").val() );
     })
 </script>
 <a class='btn settings-default'><span class='fa fa-arrow-circle-left'></span>設定</a>
 <h3><span class='fa fa-palette'></span> テーマ設定</h3>
 
-・テーマを選択
+<h4>テーマを選択</h4>
 <div class='btn' onclick="settings_theme( 'theme-default.css' )">
     標準のテーマ <span class="little">theme-default.css</span>
 </div>
@@ -25,7 +25,7 @@ <h3><span class='fa fa-palette'></span> テーマ設定</h3>
 <input type='text' class='textbox' id='settings-theme-path' placeholder='テーマファイルのパス'>
 <a class='kit-button settings-theme-path-set'>設定</a><br>
 
-<span class="fa fa-font"></span>フォント設定
+<h4><span class="fa fa-font"></span>フォント設定</h4>
 <div class='little'>システムのデフォルトフォントを指定します</div>
 <input type='text' class='textbox' id='settings-font' placeholder='フォント名(カンマ区切りで複数)'>
 <a class='kit-button settings-font-set'>設定</a>

app/settings/user.html

@@ -24,23 +24,27 @@
 </script>
 <a class='btn settings-default'><span class='fa fa-arrow-circle-left'></span>設定</a>
 <h3><span class='fa fa-user-cog'></span> ユーザー設定</h3>
-・ユーザー情報
+<h4>ユーザー情報</h4>
 <div class='btn settings-open-userpage'><span class="fa fa-user"></span><div id="settings-user-username">?</div>ユーザーページを開く</div>
 
-<span class="fa fa-address-card"></span>ユーザー名 <span class="little"> 表示される名前です</span><br>
+<span class="fa fa-address-card"></span>ユーザー名 <a onclick="S.alert('ユーザー名','表示される名前です')" class="kit-hyperlink far fa-question-circle"></a><br>
 <input type='text' class='textbox' id='settings-username'>
 <a class='kit-button settings-username-set'>設定</a><br>
 
-・セキュリティの設定 <span class='little'>パスワードに関する設定</span><br>
-<span class="fa fa-user-lock"></span>パスワード <span class='little'>ロック画面からの復帰に必要です</span><br>
+<h4>セキュリティの設定 <span class='little'>パスワードに関する設定</span></h4>
+<span class="fa fa-user-lock"></span>パスワード <a onclick="S.alert('パスワード','ロック画面からの復帰に必要です')" class="kit-hyperlink far fa-question-circle"></a>
 
-<div class="little"><span class="fa fa-key"></span>現在のパスワード：<span class="settings-user-currentpassword"></span></div>
+<div class="little"><span class="fa fa-key"></span>：<span class="settings-user-currentpassword"></span></div>
 
 <input type='password' class='textbox' id='settings-user-password'>
 <a class='kit-button settings-user-password-set'>設定</a>
 
-<br><input type='checkbox' id='settings-user-lockdisp'><label for="settings-user-lockdisp">起動時にロック画面を表示</label>
 <br>
+<div class="kit-toggle">
+    <input type="checkbox" id="settings-user-lockdisp">
+    <label for="settings-user-lockdisp"></label>
+    <label for="settings-user-lockdisp">起動時にロック画面を表示</label>
+</div>
 <span class='fa fa-palette'></span>ユーザーカラー<br>
 <input type='text' class='textbox' id='settings-user-color' placeholder="orangeやrgb(100,0,0)または#ff0050など">
 <a class='kit-button settings-user-color-set'>設定</a>

app/settings/wallpaper.html

@@ -1,20 +1,17 @@
 <a class='btn settings-default'><span class='fa fa-arrow-circle-left'></span>設定</a>
 <h3><span class='fa fa-image'></span> 壁紙の設定</h3>
-・標準の壁紙 <span class='little'>./system/wallpaper内</span>
+<h4>標準の壁紙 <span class='little'>./system/wallpaper内</span></h4>
 <div class='simplebox wallpaper-list'>
-        <a class="btn little settings-wallpapers" onclick="System.changeWallpaper('url(./system/wallpaper/2001.png)')">
-                <img src='./system/wallpaper/2001.png'>2001.png
-        </a>
         <a class="btn little settings-wallpapers" onclick="System.changeWallpaper('url(./system/wallpaper/11.jpg)')">
-                <img src='./system/wallpaper/11.jpg'>11.jpg
+                <img src='./system/wallpaper/11.jpg'>標準に戻す
         </a>
-        <a class="btn little settings-wallpapers" onclick="System.changeWallpaper('url(./system/wallpaper/2013.png)')">
-                <img src='./system/wallpaper/2013.png'>2013.png
+        <a class="btn little settings-wallpapers" onclick="S.alert('','ファイルから選択できません')">
+                <img src="./app/fivr/icon.png">ファイルから選択
         </a>
 </div>
-・任意の壁紙 <span class='little'>パスまたはURLを指定</span><br>
+<h4>任意の壁紙 <span class='little'>パスまたはURLを指定</span></h4>
 <input type='text' class='textbox' id='settings-wallpaper-path' placeholder='./system/wallpaper/sample.png など'>
 <a class='kit-button settings-wallpaper-set'>設定</a><br>
-・単色 <span class='little'>色の名前またはカラーコード</span><br>
+<h4>単色 <span class='little'>色の名前またはカラーコード</span></h4>
 <input type='text' class='textbox' id='settings-background' placeholder='#902020 や skyblue など'>
 <a class='kit-button settings-background-set'>設定</a>

config/apps.json

@@ -4,11 +4,6 @@
         "icon": "./app/browser/icon.png"
     },
 
-    "clock": {
-        "name": "時計",
-        "icon": "./app/clock/icon.png"
-    },
-
     "console": {
         "name": "コンソール",
         "icon": "./app/console/icon.png"