TheDesk Mizuki (ver.4)

LATEST.md

@@ -1,24 +1,22 @@
 ## For Astarte(kirishima.cloud), My Primary Instance
 
-TheDesk :thedesk: Mizuki (ver.1)  
+TheDesk :thedesk: Mizuki (ver.4)  
-・トゥート翻訳(By Google翻訳)
+・カラムヘッダーにの色変更(21色+デフォルト)
-・ネイティブ通知
+・画像読み込み進捗表示
-・faiconピッカー
+・引用トゥートボタン
-・画像貼り付け
+・トゥート詳細をブラウザで開くボタン
-・他アカウントでプロフを開く
+・トゥート内のトゥートへのリンクをTheDesk内で開く
-・誤爆防止措置
 ほか
 https://thedesk.top
  :github: https://github.com/cutls/TheDesk #Desk #DeskUpdate
 
  ## For Vanilla Instances
 
- Windows/LinuxクライアントTheDesk Mizuki (ver.1)リリース
+ Windows/LinuxクライアントTheDesk Mizuki (ver.4)リリース
-・トゥート翻訳(By Google翻訳)
+・カラムヘッダーにの色変更(21色+デフォルト)
-・ネイティブ通知
+・画像読み込み進捗表示
-・faiconピッカー
+・引用トゥートボタン
-・画像貼り付け
+・トゥート詳細をブラウザで開くボタン
-・他アカウントでプロフを開く
+・トゥート内のトゥートへのリンクをTheDesk内で開く
-・誤爆防止措置
 TheDeskはマルチカラム，マルチアカウントはもちろんのこと，なにかとマストドンライフをシンプルに効率化するクライアントです。
 https://thedesk.top

app/acct.html

@@ -32,10 +32,10 @@ body,html{overflow-y: scroll;}
       <div class="col s6">
             <input type="text" id="url" style="width:70%" placeholder="mstdn.jp">
             <div id="ins-suggest"></div>
-            <button class="btn waves-effect" onclick="instance()">Login</button><br>
             Windows以外でご使用の方やPleromaにログインされる方はチェックを入れて下さい。<br>
             <input type="checkbox" class="filled-in" id="linux" />
                   <label for="linux">コードセットアップ</label><br>
+            <button class="btn waves-effect" onclick="instance()">Login</button><br>
       </div>
       <div class="col s6">
             <span style="font-family:Open Sans;">Supports</span>
@@ -52,7 +52,7 @@ body,html{overflow-y: scroll;}
 現在ログイン中のインスタンス情報 by <a href="https://instances.social" target="_blank">instances.social API</a><br>
 <img src="./img/loading.svg" id="ins-prof" width="200"><br>
 <span id="ins-upd"></span>現在<br>
-ドメイン名:<span class="now-domain"></span><br>
+ドメイン名:<span id="ins-name"></span><br>
 接続済みインスタンス:<span id="ins-connect"></span>個<br>
 トゥート数:<span id="ins-toot"></span>個<br>
 ユーザー数:<span id="ins-user"></span>人<br>

app/css/tl.css

@@ -185,6 +185,7 @@ font-size:1rem;
 .cbadge {
   display: inline-block;
   min-width: 10px;
+  max-width:100px;
   padding: 3px 7px;
   font-size: 0.8em;
   margin-right: 5px;
@@ -225,9 +226,9 @@ p:not(:last-child){
   z-index:500;
   padding:5px;
   display: grid;
-  grid-template-columns: 40px 1fr 1fr 1fr 1fr;
+  grid-template-columns: 40px 1fr 1fr 1fr;
   grid-template-rows: 30px 30px;
-  grid-template-areas: 'notice notice_name notice_name notice_name notice_name' 'notice a1 a2 a3 a4' 'notf-box notf-box notf-box notf-box notf-box';
+  grid-template-areas: 'notice notice_name notice_name notice_name' 'notice a1 a2 a3' 'notf-box notf-box notf-box notf-box';
 }
 .emp{
   font-weight: bold;
@@ -260,11 +261,6 @@ p:not(:last-child){
   text-align: center;
   grid-area: a3;
 }
-
-.area-a4 {
-  text-align: center;
-  grid-area: a4;
-}
 .tl-title {
   font-family: Open Sans;
 }

app/index.html

@@ -26,7 +26,7 @@
 <script type="text/javascript" src="./js/ui/jquery-ui.min.js"></script>
 <script>
 	//必ずアプデ時のremove instance消して！
-var ver="Mizuki (ver.3)";
+var ver="Mizuki (ver.4)";
 //betaを入れるとバージョンチェックしない
 //var ver="beta";
 var acct_id=0;
@@ -150,10 +150,10 @@ var tlid=0;
 </div>
 <div class="big-menu" id="sort-tgl">
 <a onclick="sortToggle()" class="nex waves-effect">
-	<i class="material-icons nex big-icon" title="並べ替え" data-trans-title="sort">sort</i>
+	<i class="material-icons nex big-icon" title="カラム一覧" data-trans-title="sort">sort</i>
 </a>
 <br>
-<span class="side-label" data-trans="sort">並べ替え</span>
+<span class="side-label" data-trans="sort">カラム一覧</span>
 </div>
 <div id="side-dead">
 </div>
@@ -507,6 +507,7 @@ var tlid=0;
 	</div>
 	</div>
 	<div class="modal-footer">
+	<a href="#!" class="waves-effect waves-green btn-flat" onclick="brws()">ブラウザで開く</a>
 	<a href="#!" class="waves-effect waves-green btn-flat" onclick="shot()">スクリーンショット</a>
 	<a href="#!" class="waves-effect waves-green btn-flat" onclick="cbCopy()">URLをコピー</a>
 	<a href="#!" class="waves-effect waves-green btn-flat" onclick="cbCopy('emb')">埋め込む</a>
@@ -672,9 +673,11 @@ var tlid=0;
 	<div id="imagewrap">
 	<img src="" id="imgmodal">
 	</div>
+	
 	<br>
 	</div>
 	<div class="modal-footer">
+	DL:<span id="imgprog"></span>%
 	<a class="waves-effect white-text" onclick="zoom(2)">
 		<i class="material-icons">zoom_in</i>
 	</a>
@@ -742,7 +745,7 @@ var tlid=0;
 <script type="text/javascript" src="./js/ui/sort.js"></script>
 <script type="text/javascript" src="./js/ui/spotify.js"></script>
 <script type="text/javascript" src="./js/post/post.js"></script>
-<script type="text/javascript" src="./js/post/reply.js"></script>
+<script type="text/javascript" src="./js/post/use-txtbox.js"></script>
 <script type="text/javascript" src="./js/post/secure.js"></script>
 <script type="text/javascript" src="./js/post/img.js"></script>
 <script type="text/javascript" src="./js/post/status.js"></script>

app/js/common/keyshortcut.js

@@ -113,10 +113,7 @@ $(function($) {
 			if (event.ctrlKey) {
 			if (e.keyCode >= 49 && e.keyCode <= 57) {
 				var kz=e.keyCode-49;
-				if($('[tlid='+kz+']').length){
+				goColumn(kz);
-					console.log($('[tlid='+kz+']').offset().left);
-					$("#timeline-container").animate({scrollLeft:$("#timeline-container").scrollLeft()+$('[tlid='+kz+']').offset().left});
-				}
 				return false;
 			}
 			}

app/js/emoji/default-emoji.js

@@ -36,6 +36,9 @@ function customEmoji(){
     emojiList('home')
 }
 function defEmoji(target){
+    if(target=="thinking_face"){
+        target="thinking";
+    }
     var emoji=emojione.shortnameToUnicode(":"+target+":");
     var now = $("#textarea").val();
     var selin = localStorage.getItem("cursor");

app/js/login/login.js

@@ -388,6 +388,9 @@ function multi() {
 			sel = "selected";
 			var profimg=localStorage.getItem("prof_"+key);
 			var domain=localStorage.getItem("domain_"+key);
+			if(!profimg){
+				profimg="./img/missing.svg";
+			}
 			$("#acct-sel-prof").attr("src",profimg);
 			$("#toot-post-btn").text("トゥート("+domain+")");
 			if(domain=="kirishima.cloud"){

app/js/login/manager.js

@@ -46,6 +46,14 @@ function load() {
 		localStorage.setItem("acct", 0);
 		var acctN = 0;
 	}
+	var electron = require("electron");
+          var remote=electron.remote;
+          var platform=remote.process.platform;
+	    if(platform=="win32"){
+           
+        }else{
+			$("#linux").prop("checked", true);
+        }
 
 }
 //最初に読む
@@ -62,6 +70,7 @@ function data(domain) {
 	$("#ins-per").text("Loading...");
 	$("#ins-user").text("Loading...");
 	$("#ins-ver").text("Loading...");
+	$("#ins-name").text("Loading...");
 	$("#ins-prof").attr('src', "./img/loading.svg");
 	var start = "https://instances.social/api/1.0/instances/show?name=" + domain;
 	fetch(start, {
@@ -78,6 +87,7 @@ function data(domain) {
 	}).then(function(json) {
 		console.log(json);
 		if (!json.error) {
+			$("#ins-name").text(json.name);
 			$("#ins-upd").text(date(json.checked_at, 'full'));
 			$("#ins-add").text(date(json.added_at, 'full'));
 			$("#ins-connect").text(json.connections);
@@ -305,7 +315,7 @@ function refresh(target) {
 		}
 		var avatar=json["avatar"];
 		//missingがmissingなやつ
-		if(avatar=="/avatars/original/missing.png"){
+		if(avatar=="/avatars/original/missing.png" || !avatar){
 			avatar="./img/missing.svg";
 		}
 		var ref = {

app/js/platform/end.js

@@ -9,6 +9,13 @@
 	  var urls=[];
 	  if(url){
 		urls = url.match(/https?:\/\/([-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+)/);
+		//トゥートのURLぽかったら
+		toot = url.match(/https:\/\/([a-zA-Z0-9.-]+)\/@([a-zA-Z0-9_]+)\/([0-9]+)/);
+		if(toot){
+			if(toot[1]){
+				detEx(url);
+			}
+		}else{
 		//hrefがhttp/httpsならブラウザで
 		if(urls){
 		if (urls[0]) {
@@ -25,6 +32,7 @@
 		location.href = url;
 	}
 	  }
+	}
   	return false;
   });
   
@@ -88,7 +96,6 @@
 	return result;
   }
   //Nano
-  //Nano
 function nano(){
     var electron = require("electron");
     var ipc = electron.ipcRenderer;

app/js/post/reply.js

@@ -1,19 +0,0 @@
-/*リプライ*/
-function re(id,at,acct_id,mode){
-	show();
-	$("#reply").val(id);
-	var te=$("#textarea").val();
-	$("#textarea").val("@"+at+" "+te);
-	$("#rec").text("はい");
-	$("#post-acct-sel").val(acct_id);
-	$('select').material_select();
-	$("#textarea").attr("placeholder","返信モードです。クリアするときはShift+Cを押してください。");
-	vis(mode);
-}
-function reEx(id){
-	$('#tootmodal').modal('close');
-	var at=$("#tootmodal").attr("data-user");
-	var acct_id = $("#status-acct-sel").val();
-	var mode=$("#tootmodal .vis-data").attr("data-vis");
-	re(id,at,acct_id,mode);
-}

app/js/post/use-txtbox.js

@@ -0,0 +1,46 @@
+/*リプライ*/
+function re(id,at,acct_id,mode){
+	show();
+	$("#reply").val(id);
+	var te=$("#textarea").val();
+	$("#textarea").val("@"+at+" "+te);
+	$("#rec").text("はい");
+	$("#post-acct-sel").val(acct_id);
+	$('select').material_select();
+	$("#textarea").attr("placeholder","返信モードです。クリアするときはCtrl+Shift+Cを押してください。");
+	$("#textarea").focus();
+	vis(mode);
+}
+function reEx(id){
+	$('#tootmodal').modal('close');
+	var at=$("#tootmodal").attr("data-user");
+	var acct_id = $("#status-acct-sel").val();
+	var mode=$("#tootmodal .vis-data").attr("data-vis");
+	re(id,at,acct_id,mode);
+}
+//引用
+function qt(id,acct_id,at,url){
+	var qt = localStorage.getItem("quote");
+	if(!qt){
+		var qt="simple";
+	}
+	if(qt=="simple"){
+		show();
+		$("#textarea").val("\n"+url);
+	}else if(qt=="mention"){
+		show();
+		$("#textarea").val("\n"+url+" From:@"+at);
+	}else if(qt=="full"){
+		show();
+		var html=$("[toot-id="+id+"] .toot").html();
+		html = html.match(/^<p>(.+)<\/p>$/)[1];
+		html = html.replace(/<br\s?\/?>/, "\n");
+		html = html.replace(/<p>/, "\n");
+		html = html.replace(/<\/p>/, "\n");
+		html=$.strip_tags(html);
+		$("#textarea").val("\n"+"@"+at+" "+html+"\n"+url);
+	}
+	$("#textarea").focus();
+	$("#post-acct-sel").val(acct_id);
+	$('select').material_select();
+}

app/js/tl/datails.js

@@ -226,4 +226,44 @@ function trans(tar){
 	}).then(function(text) {
 		$("#toot-this .additional").html('<span class="gray">'+text+'</span>');
 	});
+}
+//ブラウザで開く
+function brws(){
+	var url=$("#tootmodal").attr("data-url");
+	const {
+		shell
+	} = require('electron');
+
+	shell.openExternal(url);
+}
+//外部からトゥート開く
+function detEx(url){
+	var domain = localStorage.getItem("domain_0");
+	var at = localStorage.getItem(domain + "_at");
+	var start = "https://" + domain + "/api/v1/search?resolve=true&q="+url
+	fetch(start, {
+		method: 'GET',
+		headers: {
+			'content-type': 'application/json',
+			'Authorization': 'Bearer ' + at
+		}
+	}).then(function(response) {
+		return response.json();
+	}).catch(function(error) {
+		todo(error);
+		console.error(error);
+	}).then(function(json) {
+		if(!json.statuses){
+			const {
+				shell
+			} = require('electron');
+  
+			shell.openExternal(url);
+		}else{
+			var id=json.statuses[0].id;
+			details(id, 0, 0)
+		}
+		
+	});
+	return;
 }

app/js/tl/parse.js

@@ -442,6 +442,9 @@ function parse(obj, mix, acct_id, tlid, popup) {
 			'\')" class="waves-effect waves-dark btn-flat" style="padding:0" title="このトゥートをブースト"><i class="text-darken-3 fa fa-retweet ' +
 			if_rt + ' rt_' + toot.id + '"></i><span class="rt_ct">' + toot.reblogs_count +
 			'</span></a></div>' +
+			'<div class="action '+can_rt+'"><a onclick="qt(\'' + toot.id + '\',' + acct_id +
+			',\'' + toot.account.acct +'\',\''+toot.url+
+			'\')" class="waves-effect waves-dark btn-flat" style="padding:0" title="このトゥートを引用"><i class="text-darken-3 fa fa-quote-right"></i></a></div>' +
 			'<div class="action"><a onclick="fav(\'' + toot.id + '\',' + acct_id +
 			',\'' + tlid +
 			'\')" class="waves-effect waves-dark btn-flat" style="padding:0" title="このトゥートをお気に入り登録"><i class="fa text-darken-3 fa-star' +

app/js/ui/img.js

@@ -1,6 +1,7 @@
 /*イメージビューワー*/
 //postのimg.jsとは異なります。
 function imgv(id, key, acct_id) {
+	$("#imgprog").text(0);
 	$('#imgmodal').attr('src', './img/loading.svg');
 	var murl = $("#" + id + "-image-" + key).attr("data-url");
 	var type = $("#" + id + "-image-" + key).attr("data-type");
@@ -8,6 +9,23 @@ function imgv(id, key, acct_id) {
 	$("#imagemodal").attr("data-acct",acct_id);
 	$(document).ready(function() {
 		if (type == "image") {
+  			xhr = new XMLHttpRequest;
+			xhr.open('GET', murl, true);
+			xhr.addEventListener('progress', function (event) {
+  			if (event.lengthComputable) {
+    			var total=event.total;
+				var now=event.loaded;
+				var per=now/total*100;
+				$("#imgprog").text(per);
+  			}
+			}, false);
+			xhr.addEventListener('loadend', function (event) {
+				var total=event.total;
+				var now=event.loaded;
+				var per=now/total*100;
+				$("#imgprog").text(per);
+			}, false);
+			xhr.send();
 			$('#imgmodal').attr('src', murl);
 			$('#imagewrap').dragScroll(); // ドラッグスクロール設定
 			$('#imagemodal').modal('open');
@@ -97,6 +115,7 @@ function imgv(id, key, acct_id) {
 }
 //イメージビューワーの送り
 function imgCont(type) {
+	$("#imgprog").text(0);
 	var key = $('#imagemodal').attr('data-key');
 	var id = $('#imagemodal').attr('data-id');
 	if (type == "next") {
@@ -110,6 +129,23 @@ function imgCont(type) {
 	var type = $("#" + id + "-image-" + key).attr("data-type");
 	$(document).ready(function() {
 		if (type == "image") {
+			xhr = new XMLHttpRequest;
+			xhr.open('GET', murl, true);
+			xhr.addEventListener('progress', function (event) {
+  			if (event.lengthComputable) {
+    			var total=event.total;
+				var now=event.loaded;
+				var per=now/total*100;
+				$("#imgprog").text(per);
+  			}
+			}, false);
+			xhr.addEventListener('loadend', function (event) {
+				var total=event.total;
+				var now=event.loaded;
+				var per=now/total*100;
+				$("#imgprog").text(per);
+			}, false);
+			xhr.send();
 			$('#imgmodal').attr('src', murl);
 			$('#imagewrap').dragScroll(); // ドラッグスクロール設定
 			$('#imagemodal').attr('data-key', key);

app/js/ui/layout.js

@@ -75,24 +75,42 @@ function parseColumn() {
 		}else{
 			var unique_notf="通知";
 		}
+		var insert="";
+		var icnsert="";
+		if(acct.background){
+			if(acct.text=="def"){
+				
+			}else{
+			if(acct.text=="black"){
+				var txhex="000000";
+				var ichex="9e9e9e"
+			}else if(acct.text=="white"){
+				var txhex="ffffff";
+				var ichex="eeeeee"
+			}
+			insert=' style="background-color:#'+acct.background+'; color: #'+txhex+'" ';
+			icnsert=' style="color: #'+ichex+'" ';
+			}
+		}
 		var html = '<div class="box" id="timeline_box_' + key + '_box" tlid="' + key +
-			'"><div class="notice-box z-depth-2">'+
+			'"><div class="notice-box z-depth-2" id="menu_'+key+'"'+insert+'>'+
 			'<div class="area-notice"><i class="material-icons waves-effect red-text" id="notice_icon_' + key + '"'+notf_attr+' style="font-size:40px; padding-top:25%;" onclick="goTop(' + key + ')" title="一番上へ。アイコンが赤のときはストリーミングに接続できていません。F5等で再読込をお試し下さい。"></i></div>'+
-			'<div class="area-notice_name"><span id="notice_' + key + '"" class="tl-title"></span></div>'+
+			'<div class="area-notice_name"><span id="notice_' + key + '" class="tl-title"></span></div>'+
 			'<div class="area-a1"><a onclick="notfToggle(' + acct.domain + ',' + key +
-						  ')" class="setting nex" title="このアカウントの'+unique_notf+'"><i class="material-icons waves-effect nex notf-icon_' +
+						  ')" class="setting nex" title="このアカウントの'+unique_notf+'"'+icnsert+'><i class="material-icons waves-effect nex notf-icon_' +
 						  acct.domain + '">notifications</i></a></div>'+
 			'<div class="area-a2"><a onclick="removeColumn(' + key +
-						  ')" class="setting nex"><i class="material-icons waves-effect nex" title="このカラムを削除">cancel</i></a></div>'+
+						  ')" class="setting nex"><i class="material-icons waves-effect nex" title="このカラムを削除"'+icnsert+'>cancel</i></a></div>'+
-			'<div class="area-a3"><a onclick="mediaToggle(' + key +
+		  '<div class="area-a3"><a onclick="setToggle(' + key +
-						  ')" class="setting nex"><i class="material-icons waves-effect nex" title="メディアフィルター">perm_media</i><span id="sta-media-' +
+		  ')" class="setting nex" title="このカラムの設定"'+icnsert+'><i class="material-icons waves-effect nex">settings</i></a></div></div>'+
-						  key + '">On</span></div>'+
-			'<div class="area-a4"><a onclick="cardToggle(' + key +
-						  ')" class="setting nex"><i class="material-icons waves-effect nex" title="リンクの解析を切り替え(OFFで制限を回避出来る場合があります)">link</i><span id="sta-card-' +
-						  key + '">On</span></a></div>'+
 		  '<div class="hide notf-indv-box" id="notf-box_' + key +
 		  '"><div id="notifications_' + key +
-		  '" data-notf="' + acct.domain + '"></div></div></div><div class="tl-box" tlid="' + key + '"><div id="timeline_' + key +
+		  '" data-notf="' + acct.domain + '"></div></div><div class="hide notf-indv-box" id="util-box_' + key +
+		  '" style="padding:5px;"><a onclick="mediaToggle(' + key +
+		  ')" class="setting nex"><i class="material-icons waves-effect nex" title="メディアフィルター">perm_media</i><span id="sta-media-' +
+		  key + '">On</span></a>メディアフィルター<br><a onclick="cardToggle(' + key +
+		  ')" class="setting nex"><i class="material-icons waves-effect nex" title="リンクの解析を切り替え(OFFで制限を回避出来る場合があります)">link</i><span id="sta-card-' +
+		  key + '">On</span></a>リンク解析<br>TLヘッダーの色<br><div id="picker_'+key+'" class="color-picker"></div></div><div class="tl-box" tlid="' + key + '"><div id="timeline_' + key +
 			'" class="tl" tlid="' + key + '"'+notf_attr+'><div style="text-align:center">[ここにトゥートはありません。]<br>F5で再読込できます。</div></div></div></div>';
 		$("#timeline-container").append(html);
 		localStorage.removeItem("pool_" + key);
@@ -135,11 +153,19 @@ function addColumn() {
 	};
 	var multi = localStorage.getItem("column");
 	var obj = JSON.parse(multi);
-	console.log(obj.length)
+	if(!obj){
-	localStorage.setItem("card_" + obj.length,"true");
+		var leng=0;
-	obj.push(add);
+		localStorage.setItem("card_" + leng,"true");
-	var json = JSON.stringify(obj);
+		var json = JSON.stringify([add]);
-	localStorage.setItem("column", json);
+		localStorage.setItem("column", json);
+	}else{
+		var leng=obj.length;
+		localStorage.setItem("card_" + leng,"true");
+		obj.push(add);
+		var json = JSON.stringify(obj);
+		localStorage.setItem("column", json);
+	}
+	
 	parseColumn();
 }
 function addselCk(){
@@ -171,4 +197,61 @@ function removeColumn(tlid) {
 			sortload()
 		}
 	})
+}
+
+//設定トグル
+function setToggle(tlid) {
+	colorpicker(tlid);
+	$("#util-box_" + tlid).toggleClass("hide");
+	$("#util-box_" + tlid).toggleClass("show");
+}
+function colorpicker(key){
+	temp=
+		'<div onclick="coloradd('+key+',\'def\',\'def\')" class="pointer">Default</div>'+
+		'<div onclick="coloradd('+key+',\'f44336\',\'white\')" class="red white-text pointer">Red</div>'+
+		'<div onclick="coloradd('+key+',\'e91e63\',\'white\')" class="pink white-text pointer">Pink</div>'+
+		'<div onclick="coloradd('+key+',\'9c27b0\',\'white\')" class="purple white-text pointer">Purple</div>'+
+		'<div onclick="coloradd('+key+',\'673ab7\',\'white\')" class="deep-purple white-text pointer">Deep-purple</div>'+
+		'<div onclick="coloradd('+key+',\'3f51b5\',\'white\')" class="indigo white-text pointer">Indigo</div>'+
+		'<div onclick="coloradd('+key+',\'2196f3\',\'white\')" class="blue white-text pointer">Blue</div>'+
+		'<div onclick="coloradd('+key+',\'03a9f4\',\'black\')" class="light-blue black-text pointer">Light-blue</div>'+
+		'<div onclick="coloradd('+key+',\'00bcd4\',\'black\')" class="cyan black-text pointer">Cyan</div>'+
+		'<div onclick="coloradd('+key+',\'009688\',\'white\')" class="teal white-text pointer">Teal</div>'+
+		'<div onclick="coloradd('+key+',\'4caf50\',\'black\')" class="green black-text pointer">Green</div>'+
+		'<div onclick="coloradd('+key+',\'8bc34a\',\'black\')" class="light-green black-text pointer">Light-green</div>'+
+		'<div onclick="coloradd('+key+',\'cddc39\',\'black\')" class="lime black-text pointer">Lime</div>'+
+		'<div onclick="coloradd('+key+',\'ffeb3b\',\'black\')" class="yellow black-text pointer">Yellow</div>'+
+		'<div onclick="coloradd('+key+',\'ffc107\',\'black\')" class="amber black-text pointer">Amber</div>'+
+		'<div onclick="coloradd('+key+',\'ff9800\',\'black\')" class="orange black-text pointer">Orange</div>'+
+		'<div onclick="coloradd('+key+',\'ff5722\',\'white\')" class="deep-orange white-text pointer">Deep-orange</div>'+
+		'<div onclick="coloradd('+key+',\'795548\',\'white\')" class="brown white-text pointer">Brown</div>'+
+		'<div onclick="coloradd('+key+',\'9e9e9e\',\'white\')" class="grey white-text pointer">Grey</div>'+
+		'<div onclick="coloradd('+key+',\'607d8b\',\'white\')" class="blue-grey white-text pointer">Blue-grey</div>'+
+		'<div onclick="coloradd('+key+',\'000000\',\'white\')" class="black white-text pointer">Black</div>'+
+		'<div onclick="coloradd('+key+',\'ffffff\',\'black\')" class="white black-text pointer">White</div>';
+	$("#picker_"+key).html(temp);
+}
+function coloradd(key,bg,txt){
+	var col = localStorage.getItem("column");
+	var o = JSON.parse(col);
+	var obj=o[key];
+	obj.background=bg;
+	obj.text=txt;
+	o[key]=obj;
+	var json = JSON.stringify(o);
+	localStorage.setItem("column", json);
+	if(txt=="def"){
+		$("#menu_"+key).attr("style","")
+	}else{
+	$("#menu_"+key).css('background-color','#'+bg);
+	if(txt=="black"){
+		var bghex="000000";
+		var ichex="9e9e9e"
+	}else if(txt=="white"){
+		var bghex="ffffff";
+		var ichex="eeeeee"
+	}
+	$("#menu_"+key+" .nex").css('color','#'+ichex);
+	$("#menu_"+key).css('color','#'+bghex);
+	}
 }

app/js/ui/scroll.js

@@ -38,4 +38,10 @@ function goTop(id){
 		$("#timeline_box_"+id+"_box .tl-box").scrollTop(500)
 	}
 	$("#timeline_box_"+id+"_box .tl-box").animate({scrollTop:0});
+}
+function goColumn(key){
+	if($('[tlid='+key+']').length){
+		console.log($('[tlid='+key+']').offset().left);
+		$("#timeline-container").animate({scrollLeft:$("#timeline-container").scrollLeft()+$('[tlid='+key+']').offset().left});
+	}
 }

app/js/ui/settings.js

@@ -119,6 +119,13 @@ function settings() {
 		Materialize.toast("ネイティブ通知を" + ntt + "に設定しました。", 3000);
 	}
 	localStorage.setItem("nativenotf", ntd);
+
+	var qtd = $("[name=quote]:checked").val();
+	var qtt = $("[for=q_"+qtd+"]").text();
+	if (qtd != localStorage.getItem("quote")) {
+		Materialize.toast("引用形式を" + qtt + "に設定しました。", 3000);
+	}
+	localStorage.setItem("quote", qtd);
 }
 
 //読み込み時の設定ロード
@@ -231,6 +238,12 @@ function load() {
 		var nnd = "yes";
 	}
 	$("#ntf_" + nnd).prop("checked", true);
+
+	var qt = localStorage.getItem("quote");
+	if (!qt) {
+		var qt = "simple";
+	}
+	$("#q_" + qt).prop("checked", true);
 }
 //最初に読む
 load();

app/js/ui/sort.js

@@ -10,7 +10,22 @@ function sortload(){
 			if(localStorage.getItem("card_" + key)=="true"){
 				flag="true"
 			}
-			var html='<li class="drag-content" data-id="'+key+'" data-flag="'+flag+'">'+localStorage.getItem("user_" + acct.domain)+"@"+localStorage.getItem("domain_" + acct.domain)+" "+cap(acct.type, acct.data)+' TL　<a onclick="removeColumn(' + key +
+			var insert="";
+
+			if(acct.background){
+			if(acct.text=="def"){
+				
+			}else{
+			if(acct.text=="black"){
+				var txhex="000000";
+			}else if(acct.text=="white"){
+				var txhex="ffffff";
+			}
+				insert=' style="background-color:#'+acct.background+'; color: #'+txhex+'" ';
+			}
+		}
+			var html='<li class="drag-content" data-id="'+key+'" data-flag="'+flag+'"'+insert+'><a onclick="goColumn(' + key +
+			')" class="setting nex"><i class="material-icons waves-effect nex" title="このカラムへ">forward</i></a>'+localStorage.getItem("user_" + acct.domain)+"@"+localStorage.getItem("domain_" + acct.domain)+" "+cap(acct.type, acct.data)+' TL　<a onclick="removeColumn(' + key +
 			')" class="setting nex"><i class="material-icons waves-effect nex" title="このカラムを削除">cancel</i></a></li>';
 			$("#sort").append(html);
 		});

app/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "TheDesk",
-  "version": "13.9.0",
+  "version": "14.4.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

app/package.json

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

app/setting.html

@@ -152,6 +152,15 @@
 			<!--画像を投稿し、インラインで表示(Markdownに対応したインスタンスのみ。マルチアカウント環境では非推奨。)-->
 		</label>
 		<br>
+		<h5>引用形式</h5>
+		<input class="with-gap" onchange="settings()" name="quote" type="radio" id="q_simple" value="simple" />
+		<label for="q_simple">URLのみ</label>
+		<input class="with-gap" onchange="settings()" name="quote" type="radio" id="q_mention" value="mention" />
+		<label for="q_mention">URLとアカウント名(相手に通知)</label>
+		<input class="with-gap" onchange="settings()" name="quote" type="radio" id="q_full" value="full" />
+		<label for="q_full">本文・URL・アカウント名
+		</label>
+		<br>
 	</div>
 	</li>
 	<li>

ver.json

@@ -1 +1 @@
-{"warn":"これはGCPにアップして下さい！！","warn2":"これはGCPにアップして下さい！！","warn3":"これはGCPにアップして下さい！！","desk":"Mizuki (ver.3)","date":"2018-04-01","detail":"内部V:14.3.0|リスト機能実装・SpotifyNowPlayingのプラットフォーム拡充・翻訳バグ修正ほか"}
+{"warn":"これはGCPにアップして下さい！！","warn2":"これはGCPにアップして下さい！！","warn3":"これはGCPにアップして下さい！！","desk":"Mizuki (ver.3[fixed])","date":"2018-04-07","detail":"内部V:14.4.0|・カラムヘッダーの色変更・引用トゥートボタンほか"}