#ToDo 関連のメモ ( #sorashima )

「物の状態が最終的にこうなっていたら良いな一覧と、その為の手順を書き込む」アプリを使う上でのメモなど。(内容が古いまま、間違ったままもあるので注意。)広告が自動で挿入される無料版ブログサービスを利用しているので、PVが増えても一銭の得にもなりませぬ

[ 記事一覧へ ]

#WorkFlowy をよりTask管理アプリらしくしてみる その2 〜PostIty〜

前回のメモ「Moo.do, Trello, Google Keep, Cardy」の、

階層を表すのなら、カードスタイルよりもカードによく似ているが重ね貼りできる「付箋」の方がイメージしやすい。

を、W&R氏のCardyに手を加えて作ってみた。

PostIty2

/* ページ全体のスタイル */
.page {
    font-family:Hiragino Sans;
    color: black;
    background: #ccc;
    border-radius: 5px;
}

/* パンくずリストとズームインしたプロジェクトのnameの間の横線を消す */
.selected {
    border-top: none;
}

/* ズームインしたプロジェクトのスタイル */
.project.open.selected {
    background: #ccc;
}

/* ズームインしたプロジェクトのnameのスタイル */
.project.selected>.name .content {
    font-size: large;
    font-weight: bold;
    line-height: 1.4em;
}

/* 「アウトラインのHome・パンくずリストとして表示されているアイテム・ズームインしたアイテムそのもの」以外の、各プロジェクトやタスクのスタイル*/
.project:not(.mainTreeRoot,.parent,.selected) {
    color: black;
    word-break: break-all;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #eeeeee), color-stop(0.50, #eeeeee), color-stop(1.00, #ffffff));
    padding: 3px !important;
    margin: 8px 3px 0px !important;
    border-radius: 2px;
    border: 1px #aaaaaa solid !important;
    -webkit-box-shadow:0px 2px 2px 0px rgba(0,0,0,0.4) !important;
}

/* 一番下のカード同士に隙間 */
.project.selected>.children>.project {
    margin-bottom: 10px !important;
}

/* カードのnameは太字 */
.project:not(.parent) .name .content {
    font-weight: bold;
    padding-bottom: 5px !important;
}

/* 完了したプロジェクトの中の未完了のプロジェクトやタスクは赤字 */
.project.done .project:not(.done) > .name .content{
    color:red !important;
}

/* タグはオレンジ */
.contentTag {
    color: darkorange !important;
}

/* 実行中タグはバックグラウンドカラーオレンジで */
.contentTag[title="Filter @ongoing"] {
    color:black !important;
    background-color:orange !important;
}

/* 年内タグの背景色は青 */
.contentTag[title="Filter @y"] {
    color:black !important;
    background-color:aqua !important;
}

/* 月内タグの背景色は緑 */
.contentTag[title="Filter @y-m"] {
    color:black !important;
    background-color:lime !important;
}

/* 週内タグの背景色は黄色 */
.contentTag[title="Filter @y-m-w"] {
    color:black !important;
    background-color:yellow !important;
}

/* 日内タグの背景色は赤 */
.contentTag[title="Filter @y-m-w-d"] {
    color:black !important;
    background-color:#FF82B2 !important;
}

/* リンクはダークブルー */
.contentLink {
    color: darkblue !important;
}

/* アンダーライン指定は水色アンダーライン */
.contentUnderline {
    border-bottom: 2px aqua solid;
    text-decoration: none;
}

/* ボールド指定はピンクアンダーライン */
.contentBold {
    border-bottom: 2px pink solid;
}

/* イタリック指定はバックグラウンドカラーライムで */
.contentItalic {
    background: lime;
}

/* ノートがある場合のみ、ノートの下に隙間を確保 */
.project.noted > .notes {
    margin-bottom: 3px;
}

/* ノートは全行表示する */
.project.noted > .notes > .content {
    font-size: medium !important;
    line-height: 1.4em !important;
    height:auto !important;
    min-height:20px !important;
    overflow:visible !important;
    line-height:20px !important;
    display:block !important;
    -webkit-box-orient:inherit !important;
    -webkit-line-clamp:inherit !important;
    white-space:pre !important;
}

/* bulletのドットを表示させない */
.bullet {
    background-image: none;
}

/* 折りたたんだbullentのBoxをグレーに */
.bullet,
#bulletBucket .bulletBucketBullet {
    background: gray;
    border-radius: 3px;
}

/* bulletは灰色枠の□ */
.project:not(.parent).open>.name>.bullet, .project.task>.name>.bullet {
    display: block !important;
    border: 1px gray solid !important;
    border-radius: 3px;
}

/* 完了プロジェクトやタスクのbulletの□にチェック */
.project.done>.name>.bullet::after {
    content: "✔";
}

/* 子要素の無駄なインデントを無くす */
.children {
    position: relative;
    margin: 0px;
    border: 0px;
    padding: 0px;
}

/*
.selected>.children>.project .project {
   margin: 0px;
   margin-bottom: 3px;
   border-top: 1px solid #ddd;
}
*/

/* ? */
.project.highlighted::before,
.project.moving::before,
.project.tapped::before,
.draggableNameClone::before {
    background: none !important;
}

/* 移動中のオレンジライン表示 */
#moveDropLine {
    background: orange;
}

HandyFlowyへの登録はStylenoteを使用した。
(スタイルシートを簡略化する為に、CSS4の内、今のところSafariしか対応していないセレクターを使っているので、Stylish add-onでChromeFirefoxに適用しても正常に表示されない)


タスク(最下位トピック)だけ付箋の色を変えると良いかも。


追記2 @2016-06-06 myHFStyleスクリプトに対応するために、付箋に着色している部分の!importantを消した。


追記1 @2016-04-21
HandyFlowyがバージョンアップされて、機能拡張スクリプトクラウド同期ができるようになった。
早速iPhoneから転送されてきたこのCSS適用スクリプトiPad miniで試したところ、各トピックの後に四角い物が表示され、チェックボックスも大小二重に表示されていて、ところどころなんか変だ。
しかし、WindowsではiOSSafariのWebインスペクタが使えない。カットアンドトライだけでiPhoneiPadの両方に対応させるのは…ちょっとお手上げだ。
*1

*1:またやってしまった。タブ1のデフォルト拡張スクリプトに別スタイルを指定している上に重ねてPostItyを適用してしまっていた。素の状態にPostItyだけだったらiPadでも問題無かった。

広告を非表示にする