TheDesk Mio (ver.4)

app/css/master.css

@@ -160,6 +160,9 @@ blockquote:before, .quote:before {
 #pip-content .material-icons{
   display:none;
 }
+.big-text{
+  font-size:1.2rem;
+}
 
 @media only screen and (min-width: 993px){
 #toast-container {
@@ -197,7 +200,7 @@ blockquote:before, .quote:before {
   justify-content: center;
   align-items: center;
 }
-.blacktheme #imagemodal,.blacktheme  #videomodal,.blacktheme  #tootmodal {
+.blacktheme #imagemodal,.blacktheme  #videomodal,.blacktheme  #tootmodal,.blacktheme #releasenote {
   background-color: black;
 }
 .blacktheme .collapsible-header,.blacktheme .tabs,.blacktheme #pip {
@@ -218,7 +221,7 @@ blockquote:before, .quote:before {
   justify-content: center;
   align-items: center;
 }
-.indigotheme #imagemodal,.indigotheme  #videomodal,.indigotheme  #tootmodal {
+.indigotheme #imagemodal,.indigotheme  #videomodal,.indigotheme  #tootmodal,.indigotheme #releasenote  {
   background-color: #0d1351;
 }
 .indigotheme .collapsible-header,.indigotheme .tabs,.indigotheme #pip {
@@ -239,7 +242,7 @@ blockquote:before, .quote:before {
   justify-content: center;
   align-items: center;
 }
-.browntheme #imagemodal,.browntheme  #videomodal,.browntheme  #tootmodal {
+.browntheme #imagemodal,.browntheme  #videomodal,.browntheme  #tootmodal,.browntheme #releasenote {
   background-color: #261411;
 }
 .browntheme .collapsible-header,.browntheme .tabs,.browntheme #pip {

app/css/tl.css

@@ -82,9 +82,12 @@ iframe {
 }
 .user{
   cursor:text;
-  font-size:1.2rem;
+  font-size:1.1rem;
 }
 .emojione,.emoji-img{
+  width: 15px;
+}
+.area-toot .emojione,.area-toot .emoji-img{
   width: 20px;
   vertical-align: middle;
   margin: -3px 0 0;
@@ -107,7 +110,7 @@ iframe {
   width: 100%;
   display: grid;
   grid-template-columns: 43px 2fr 1fr;
-  grid-template-areas: 'notice notice notice' 'icon display_name acct' 'icon toot toot' 'vis additional additional' 'actions actions actions';
+  grid-template-areas: 'notice notice notice' 'icon display_name display_name' 'icon toot toot' 'vis additional additional' 'actions actions actions';
 }
 
 .area-notice {
@@ -125,25 +128,31 @@ grid-area: icon;
   user-select: auto;
 height:1.5em;
 margin:2px;
+margin-left:5px;
 overflow:hidden;
 grid-area: display_name;
 white-space: nowrap;
 text-overflow: ellipsis;
+display:flex;
+justify-content:space-between;
+  width:100%;
+  flex-wrap:nowrap
+}
+.flex-name{
+  max-width:calc(100% - 60px);
+  overflow:hidden;
+  text-overflow: ellipsis;
+}
+.flex-time{
+  
 }
 
-.area-acct {
-margin:2px;
-grid-area: acct;
-overflow:hidden;
-text-align:right;
-white-space: nowrap;
-text-overflow: ellipsis;
-}
 
 .area-toot {
   cursor:text;
   user-select: auto;
 margin:2px;
+margin-left:5px;
 grid-area: toot;
 }
 
@@ -207,6 +216,14 @@ font-size:1rem;
   text-overflow: ellipsis;
   height:calc(0.8em + 8px);
 }
+.cbadge-hover {
+  color: #000;
+  background-color: transparent;
+}
+.cbadge-hover:hover {
+  color: #fff;
+  background-color: #777;
+}
 p {
   margin: 0;
   margin-bottom: 0px;
@@ -319,6 +336,7 @@ p:not(:last-child){
 }
 
 /*black theme*/
+.blacktheme .cbadge-hover,.browntheme .cbadge-hover,.indigotheme .cbadge-hover { color: #fff;}
 .blacktheme .notf-box,.blacktheme .modal-footer,.blacktheme #sidebar {
   background-color: #424242;
 }

app/css/userdata.css

@@ -33,6 +33,9 @@
 .active-back{
   background-color: #e6ee9c;
 }
+#his-name .emojione,#his-name .emoji-img{
+  width: 20px;
+}
 
 
 /*black theme*/

app/index.html

@@ -26,7 +26,7 @@
 <script type="text/javascript" src="./js/ui/jquery-ui.min.js"></script>
 <script>
 	//必ずアプデ時のremove instance消して！
-var ver="Mio (ver.3)";
+var ver="Mio (ver.4)";
 //betaを入れるとバージョンチェックしない
 //var ver="beta";
 var acct_id=0;
@@ -298,7 +298,7 @@ var tlid=0;
 		<span><span id="imgup"></span><span id="imgsel"><i class="waves-effect material-icons gray" onclick="fileselect()" title="ファイルを選択">photo_library</i></span></span>
 		<i class="waves-effect gray material-icons" onclick="adobe()" title="Adobeフォトエディタ">format_shapes</i>
 		<i class="waves-effect gray material-icons" onclick="emoji()" title="絵文字を挿入">tag_faces</i>
-		<a class="pointer waves-effect gray" id="npbtn" title="NowPlaying[クリックでSpotify(アカウント連携が必要です)/右クリックでiTunes(macOSが必要です)]"><i class="material-icons" style="font-size:24px;">music_note</i></a>
+		<a class="pointer waves-effect gray" id="npbtn" title="NowPlaying[クリックでSpotify(アカウント連携が必要です)/control+クリックでiTunes(macOSが必要です)]"><i class="material-icons" style="font-size:24px;">music_note</i></a>
 		<i class="material-icons nex gray waves-effect" title="トゥートボックスのクリア(Ctrl+Shit+C)" data-trans-title="post_box_clear" id="clear">clear</i>
 </div>
 <div class="col s12 mize" style="margin-bottom:5px; padding:0;">
@@ -672,6 +672,38 @@ var tlid=0;
 	<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
 	</div>
 	</div>
+	<!-- Modal Structure Release Note-->
+	<div id="releasenote" class="modal modal-fixed-footer">
+		<div class="modal-content">
+		<h3>TheDesk</h3>
+		<a href="https://thedesk.top" target="_blank">HP</a><br>
+		<a href="https://github.com/cutls/TheDesk" target="_blank">GitHub</a><br><br>
+			<div id="release-Mio_ver-4" style="display:none">
+				<h5>Release Note</h5>
+・nodist セキュリティアップデート<br>
+・UI変更<br>
+以下はver.3の新機能<br>
+・macOS版正式リリース<br>
+・Spotifyなうぷれ改修(アートワーク投稿)<br>
+・iTunesなうぷれ機能(macOS必須)<br>
+・メインアカウント機能(起動時や投稿後のアカウントを指定)<br>
+・エアリプソース確認が投稿者のアカウントのLTLに<br>
+・未認証TLのトゥートをメインアカウントで詳細表示できるように<br>
+・Nano機能がウィンドウ位置を記憶するように<br>
+・DMタイムライン<br>
+・(imastodon.net)トレンドタグ表示機能<br>
+			</div>
+			<br><br>
+		TheDeskはオープンソース・ソフトウェアです。<br>
+		皆様のあたたかい支援のもとで製作されています。<br>
+		<a href="https://enty.jp/Cutls" target="_blank">Entyで支援</a><br>
+		<a href="mailto:mstdn@thedesk.top" target="_blank">mstdn@thedesk.top</a>にAmazonギフトカードを送る<br>
+		<a href="https://osushi.love/Cutls_P" target="_blank">Osushi.love</a>で寿司を贈る<br>
+		</div>
+		<div class="modal-footer">
+			<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
+		</div>
+	</div>
 	<!--PiP-->
 	<div id="pip" class="hide pip-bottom pip-left">
 		<i class="material-icons pip-horiz pointer" onclick="pipHoriz()">chevron_right</i>　

app/js/common/version.js

@@ -1,6 +1,20 @@
 //バージョンチェッカー
 function verck(ver) {
-	localStorage.setItem("ver", ver);
+	if(localStorage.getItem("ver")!=ver){
+		localStorage.setItem("ver", ver);
+		console.log("Thank you for your update");
+		$(document).ready(function(){
+			$('#releasenote').modal('open');
+			verp=ver.replace( '(', '');
+			verp=verp.replace( '.', '-');
+			verp=verp.replace( '[', '-');
+			verp=verp.replace( ']', '');
+			verp=verp.replace( ')', '');
+			verp=verp.replace( ' ', '_');
+			$("#release-"+verp).show();
+		  });
+	}
+	
 	var l = 5;
 
 	// 生成する文字列に含める文字セット

app/js/tl/date.js

@@ -21,7 +21,7 @@ function date(str, datetype) {
 			var sec = date.getSeconds();
 		}
 		if (datetype == "full") {
-			var ret = date.getFullYear() + "年" + month + "月" + date.getDate() + "日 " +
+			var ret = date.getFullYear() + "/" + month + "/" + date.getDate() + "/ " +
 				date.getHours() + ":" + min + ":" + sec;
 		}
 		if (date.getFullYear() == now.getFullYear()) {
@@ -34,15 +34,15 @@ function date(str, datetype) {
 					}
 
 				} else {
-					var ret = month + "月" + date.getDate() + "日 " + date.getHours() + ":" +
+					var ret = month + "/" + date.getDate() + " " + date.getHours() + ":" +
 						min + ":" + sec;
 				}
 			} else {
-				var ret = month + "月" + date.getDate() + "日 " + date.getHours() + ":" + min +
+				var ret = month + "/" + date.getDate() + " " + date.getHours() + ":" + min +
 					":" + sec;
 			}
 		} else {
-			var ret = date.getFullYear() + "年" + month + "月" + date.getDate() + "日 " +
+			var ret = date.getFullYear() + "/" + month + "/" + date.getDate() + " " +
 				date.getHours() + ":" + min + ":" + sec;
 		}
 		if (datetype == "double") {

app/js/tl/parse.js

@@ -144,8 +144,10 @@ function parse(obj, mix, acct_id, tlid, popup) {
 		if (mix == "notf") {
 			if (toot.type == "mention") {
 				var what = "が返信しました";
+				var icon = "fa-share teal-text";
 			} else if (toot.type == "reblog") {
 				var what = "がブーストしました";
+				var icon = "fa-retweet light-blue-text";
 				if(localStorage.getItem("domain_" + acct_id)=="imastodon.net" && !locale){
 					what = ":「わかるわ」";
 				}else if(localStorage.getItem("domain_" + acct_id)=="mstdn.osaka" && !locale){
@@ -153,19 +155,20 @@ function parse(obj, mix, acct_id, tlid, popup) {
 				}
 			} else if (toot.type == "favourite") {
 				var what = "がお気に入り登録しました";
+				var icon = "fa-star  yellow-text";
 				if(localStorage.getItem("domain_" + acct_id)=="imastodon.net" && !locale){
 					what = "の頭にティンときたようです";
 				}else if(localStorage.getItem("domain_" + acct_id)=="mstdn.osaka" && !locale){
 					what = "がええやんと言いました";
 				}
 			}
-			var noticetext = '<span class="cbadge"title="' + date(toot.created_at,
+			var noticetext = '<span class="cbadge cbadge-hover"title="' + date(toot.created_at,
 				'absolute') + '(通知された時間)"><i class="fa fa-clock-o"></i>' + date(toot.created_at,
 				datetype) +
-			'</span><a onclick="udg(\'' + toot.account.id +
+			'</span><i class="big-text fa '+icon+'"></i><a onclick="udg(\'' + toot.account.id +
-				'\',\'' + acct_id + '\')" class="pointer">' + dis_name +
+				'\',\'' + acct_id + '\')" class="pointer grey-text">' + dis_name +
 				"(" + toot.account.acct +
-				")</a>" + what;
+				")</a>";
 			var notice = noticetext;
 			var memory = localStorage.getItem("notice-mem");
 			if (popup >= 0 && obj.length < 5 && noticetext != memory) {
@@ -205,13 +208,14 @@ function parse(obj, mix, acct_id, tlid, popup) {
 			var if_notf="";
 			if (toot.reblog) {
 				var rebtxt = "がブースト";
+				var rticon = "fa-retweet light-blue-text";
 				if(localStorage.getItem("domain_" + acct_id)=="imastodon.net" && !locale){
 					rebtxt = ":「わかるわ」";
 				}else if(localStorage.getItem("domain_" + acct_id)=="mstdn.osaka" && !locale){
 					rebtxt = "がしばいた";
 				}
-				var notice = dis_name + "(" + toot.account.acct +
+				var notice = '<i class="big-text fa '+rticon+'"></i>'+ dis_name + "(" + toot.account.acct +
-					")"+rebtxt+"<br>";
+					")<br>";
 					var boostback = "shared";
 				var toot = toot.reblog;
 				var dis_name=escapeHTML(toot.account.display_name);
@@ -496,15 +500,15 @@ function parse(obj, mix, acct_id, tlid, popup) {
 			'<img src="' + avatar +
 			'" width="40" class="prof-img" user="' + toot.account.acct +
 			'"></a></div>' +
-			'<div class="area-display_name"><span class="user">' +
+			'<div class="area-display_name"><div class="flex-name"><span class="user">' +
 			dis_name +
 			'</span><span class="sml gray" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis; cursor:text;"> @' +
 			toot.account.acct + locked + '</span></div>' +
-			'<div class="area-acct"><div><span class="cbadge pointer waves-effect" onclick="tootUriCopy(\'' +
+			'<div class="flex-time"><span class="cbadge cbadge-hover pointer waves-effect" onclick="tootUriCopy(\'' +
 			toot.url + '\');" title="' + date(toot.created_at, 'absolute') +
 			'(クリックでトゥートURLをコピー)"><i class="fa fa-clock-o"></i>' +
-			date(toot.created_at, datetype) + '</span><span style="padding:0;">' +
+			date(toot.created_at, datetype) + '</span>' +
-			vis + '</span></div></div>' +
+			'</div></div>' +
 			'<div class="area-toot"><span class="toot ' + spoiler + '">' + content +
 			'</span><span class="' +
 			api_spoil + ' cw_text_' + toot.id + '">' + spoil + spoiler_show +
@@ -515,6 +519,7 @@ function parse(obj, mix, acct_id, tlid, popup) {
 			'' + mentions + tags + '</div>' +
 			'<div class="area-vis"></div>'+
 			'<div class="area-actions '+mouseover+'" style="padding:0; margin:0; top:-20px; display:flex; justify-content:space-around; max-width:100%; ">' +
+			'<div class="action">'+vis+'</div>'+
 			'<div class="action '+antinoauth+'"><a onclick="detEx(\''+toot.url+'\',\'main\')" class="waves-effect waves-dark details" style="padding:0">詳細(メインアカウント経由)</a></div>' +
 			'<div class="action '+disp["re"]+' '+noauth+'"><a onclick="re(\'' + toot.id +
 			'\',\'' + toot.account.acct + '\',' +

app/main.js

@@ -21,6 +21,7 @@ const app = electron.app;
     	customPath: void 0 // Relative path if you want to use your fork of toast.exe 
 	});
 	}
+
 // ウィンドウを作成するモジュール
 const BrowserWindow = electron.BrowserWindow;
 const {

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "TheDesk",
-  "version": "15.3.0",
+  "version": "15.4.0",
   "description": "TheDesk on Mastodonはシンプルと多機能を両立したデスクトップ向けクライアントです",
   "main": "main.js",
   "scripts": {

app/setting.html

@@ -116,7 +116,8 @@
 		<input class="with-gap" onchange="settings()" name="mov" type="radio" id="mov_no" value="no" />
 		<label for="mov_no">いいえ</label>
 		<br>
-		<h5>指定行数以上を折りたたむ</h5>5文字以下のトゥートは折りたたみません。また、折りたたみ時は改行が描画されません。
+		<h5>指定行数以上を折りたたむ</h5>
+		5文字以下のトゥートは折りたたみません。また、折りたたみ時は改行が描画されません。改行のみを行数とカウントします。
 		<br>
 		<input type="text" style="width:50px" id="sentence">行以上または 
 		<input type="text" style="width:50px" id="letters">文字以上 
@@ -224,8 +225,9 @@
 			<h5>テンプレートの編集</h5>
 			以下を編集してテンプレートを変更できます。<br>
 			<textarea id="np-temp" class="materialize-textarea" data-length="500">#NowPlaying {song} / {album} / {artist}
-{url} #SpotifyWithTheDesk</textarea><br>
+{url}</textarea><br>
 				テンプレート:{song}:曲名/{album}:アルバム名/{artist}:アーティスト名/{url}:各曲のSpotifyのURL<br>
+				iTunes NowPlayingでも{url}以外のテンプレートに従ってトゥートされます。<br>
 			<button onclick="spotifySave()" class="btn waves-effect" style="width:100px;">設定</button>
 		</div>
 	</li>

ver.json

@@ -1 +1 @@
-{"warn":"これはGCPにアップして下さい！！","warn2":"これはGCPにアップして下さい！！","warn3":"これはGCPにアップして下さい！！","desk":"Mio (ver.3)","date":"2018-05-20","detail":"内部V:15.3.0|機能追加たくさんあります。"}
+{"warn":"これはGCPにアップして下さい！！","warn2":"これはGCPにアップして下さい！！","warn3":"これはGCPにアップして下さい！！","desk":"Mio (ver.3)","date":"2018-05-26","detail":"内部V:15.4.0|UI改修ほか"}