when in offline

app/css/master.css

@@ -21,7 +21,8 @@ html {
 .action-menu-item:hover {
 	filter: brightness(80%) !important;
 }
-.btn, .btn-flat {
+.btn,
+.btn-flat {
 	font-size: 1.1rem;
 	margin: 0.4rem;
 	text-transform: none;
@@ -340,16 +341,16 @@ blockquote:before,
 	flex-wrap: wrap;
 	flex-direction: column;
 }
-input[type="color"] {
+input[type='color'] {
 	-webkit-appearance: none;
 	border: none;
 	width: 32px;
 	height: 32px;
 }
-input[type="color"]::-webkit-color-swatch-wrapper {
+input[type='color']::-webkit-color-swatch-wrapper {
 	padding: 0;
 }
-input[type="color"]::-webkit-color-swatch {
+input[type='color']::-webkit-color-swatch {
 	border: none;
 }
 #menu {
@@ -631,6 +632,24 @@ button {
 }
 .via-dropdown {
 	text-overflow: ellipsis;
-    white-space: nowrap;
+	white-space: nowrap;
-    overflow-x: hidden;
+	overflow-x: hidden;
-}
+}
+#re-online {
+	background-color: rgb(38, 92, 153);
+	position: fixed;
+	width: 100vw;
+	height: 2rem;
+	padding: 0.25rem;
+	color: white;
+	z-index: 1000;
+}
+#offline {
+	background-color: rgb(153, 38, 38);
+	position: fixed;
+	width: 100vw;
+	height: 2rem;
+	padding: 0.25rem;
+	color: white;
+	z-index: 999;
+}

app/js/platform/end.js

@@ -219,10 +219,12 @@ if(pwa) {
 const connection = function (event) {
 	console.log(navigator.onLine, 'network state')
 	if(!navigator.onLine) {
-		$('#toot-post-btn').addClass('disabled')
+		$('#re-online').addClass('hide')
-	} else {
+		$('#offline').removeClass('hide')
-		$('#toot-post-btn').removeClass('disabled')
+	} else if(!$('#offline').hasClass('hide')) {
+		$('#offline').addClass('hide')
+		$('#re-online').removeClass('hide')
 	}
 }
 window.onoffline = connection
-window.ononline = connection
+window.ononline = connection

app/js/post/post.js

@@ -10,6 +10,15 @@ function sec() {
 	post(null, mode)
 }
 function post(mode, postvis, dry) {
+	if(!navigator.onLine && !dry) {
+		draftToggle(true)
+		addToDraft()
+		M.toast({
+			html: lang.lang_post_offline,
+			displayLength: 3000
+		})
+		return false
+	}
 	if ($('#toot-post-btn').prop('disabled')) {
 		return false
 	}

app/js/post/secure.js

@@ -128,8 +128,8 @@ function schedule() {
 }
 
 //下書き機能
-function draftToggle() {
+function draftToggle(force) {
-	if ($('#draft').hasClass('hide')) {
+	if ($('#draft').hasClass('hide') || force) {
 		$('#draft').removeClass('hide')
 		$('#right-side').show()
 		$('#right-side').css('width', '300px')

app/package.json

@@ -1,6 +1,6 @@
 {
     "name": "thedesk",
-    "version": "21.2.4",
+    "version": "21.2.5",
     "codename": "Mayu",
     "description": "TheDesk is a Mastodon client for PC.",
     "repository": "https://github.com/cutls/TheDesk",

app/view/make/index.sample.html

@@ -43,6 +43,12 @@
 			<i class="material-icons">chat</i>
 		</button>
 	</div>
+	<div id="offline" class="hide">
+		@@nowOffline@@
+	</div>
+	<div id="re-online" class="hide">
+		@@reOnline@@
+	</div>
 	<div id="tl">
 		<!--TL-->
 		<!--スターター-->

app/view/make/language/en/index.json

@@ -1,5 +1,7 @@
 {
     "draghere":"Drag here to upload",
+    "nowOffline":"OFFLINE: all of your post is in the draft box and you should reload after re-connect to the Internet",
+    "reOnline":"Now we are in the Internet, you should reload...",
     "close":"Close",
     "webSrc": "Search on Web",
     "tsSrc": "Search on tootsearch",

app/view/make/language/en/main.json

@@ -71,6 +71,7 @@
     "lang_post_btn3": "Continue to post",
     "lang_post_unfinishedMedia": "The server has not finished processing your media. Retry.",
     "lang_post_retry": "Retry",
+    "lang_post_offline": "Add to the drafts because of offline",
     "lang_status_favWarn": "It will take a miunte to favourite a remote toot.",
     "lang_status_btWarn": "It will take a miunte to boost a remote toot.",
     "lang_status_follow": "Follow",

app/view/make/language/ja-KS/index.json

@@ -1,5 +1,7 @@
 {
     "draghere":"ドラッグしてみ？(ドラッグしたらすぐアップロードされるで)",
+    "nowOffline":"オフラインやで。投稿は全部下書きに行くし、もしオンラインなったら再読み込みしたらええで。",
+    "reOnline":"オンライン戻ったから再読み込みしてな。",
     "close":"Close",
     "webSrc": "Webでさがす",
     "tsSrc": "tootsearchでさがす",

app/view/make/language/ja-KS/main.json

@@ -72,6 +72,7 @@
     "lang_status_btWarn": "ブーストしたんやけどインスタンスがちゃうときは時間がかかるで、知らんけど。",
     "lang_post_unfinishedMedia": "処理未了のメディアがあります。再試行してください。",
     "lang_post_retry": "再試行",
+    "lang_post_offline": "オフラインやったし下書きいれといたで",
     "lang_status_follow": "フォロー",
     "lang_status_unfollow": "フォロー解除",
     "lang_status_block": "ブロック",

app/view/make/language/ja/index.json

@@ -1,5 +1,7 @@
 {
     "draghere":"ここにドラッグして添付(ドラッグと同時にアップロードされます)",
+    "nowOffline":"オフラインです。投稿はすべて下書きに追加されます。オンライン復帰時には再読み込みを推奨します。",
+    "reOnline": "オンラインに復帰しました。再読み込みを推奨します。",
     "webSrc": "Webで検索",
     "tsSrc": "tootsearchで検索",
     "close":"Close",

app/view/make/language/ja/main.json

@@ -72,6 +72,7 @@
     "lang_post_btn3": "そのまま投稿",
     "lang_post_unfinishedMedia": "処理未了のメディアがあります。再試行してください。",
     "lang_post_retry": "再試行",
+    "lang_post_offline": "オフラインのため下書きに追加しました。",
     "lang_status_favWarn": "お気に入り登録しました。インスタンスが違うときは時間がかかる場合があります。",
     "lang_status_btWarn": "ブーストしました。インスタンスが違うときは時間がかかる場合があります。",
     "lang_status_follow": "フォロー",