main

noz-23 · Apr 4, 2024 · 9ea9047 · 9ea9047
1 parent a2d4d1f
commit 9ea9047
Show file tree

Hide file tree

Showing 10 changed files with 1,572 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,73 @@
-# KintoneItsNew
-変更があったフィールドの書式を変更するプラグイン
+# KintoneItsNew
+
+## Kintone 更新したフィールドの書式変更プラグイン
+
+## 1.概要
+
+レコードを更新した場合に、更新したフィールドの書式を変更するプラグインです。
+
+一つ前の履歴内容の表示を変えます。
+
+新規作成時は動作しません。
+
+### イメージ
+
+　![kintoneItsNew](https://github.com/noz-23/KintoneItsNew/assets/160399039/8dcb488b-4d8d-430d-a476-16ec78e53e51)
+
+
+## 2.注意点
+
+公式のアナウンスしていないURL引数を使っているので、今後ダメになる場合があります。
+
+tinyColorPicker が JQuery の Ver.3 以降(context削除)に対応してないっぽいので、再利用する場合は気をつけ下さい。
+
+## 3.今後
+
+cssなど利用し表示の見栄えを良くしようと思います。
+
+## 4.ライセンス
+
+MIT license
+
+## 5.利用
+
+JQuery   :https://jquery.com
+
+    https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js
+
+
+jsrender :https://www.jsviews.com
+
+    https://cdnjs.cloudflare.com/ajax/libs/jsrender/0.9.91/jsrender.min.js
+
+
+tinyColorPicker and colors :https://github.com/PitPik/tinyColorPicker
+
+    https://cdnjs.cloudflare.com/ajax/libs/tinyColorPicker/1.1.1/jqColorPicker.min.js
+
+参考
+　条件書式プラグイン：
+　　https://github.com/kintone-samples/plugin-samples
+
+　　https://cybozu.dev/ja/kintone/tips/development/plugins/sample-plugin/conditionformat-v2-plugin/
+
+
+## 6.バージョン履歴
+
+2024/04/03 0.1.0 初版 
+
+## 7.連絡
+
+nzds23@yahoo.co.jp
+
+## 8.商用利用
+
+ライセンス条項を守って頂ければ特に制限ありません。
+
+可能なら記載したいので、メールアドレスに連絡頂ければ幸いです。
+
+プラグイン設定画面で Google AdSense の広告表示をしています。
+
+わかり易くしてますので、削除は自分でやって下さい。
+
+
diff --git a/plugin.zip b/plugin.zip
diff --git a/src/css/51-modern-default.css b/src/css/51-modern-default.css
diff --git a/src/css/config.css b/src/css/config.css
@@ -0,0 +1,125 @@
+/*
+ * New Condition Format plug-in
+ * Copyright (c) 2016 Cybozu
+ *
+ * Licensed under the MIT License
+ */
+.settings-heading {
+  padding: 1em 0;
+}
+
+.kintoneplugin-input-text {
+  width: 20em;
+}
+/* color picker
+   https://github.com/PitPik/tinyColorPicker
+*/
+.kintoneplugin-table-th .title {
+    min-width: 40px;
+}
+.color-paint-brush:hover {
+    cursor: pointer;
+}
+
+.cp-color-picker {
+    background-color: #fff !important;
+    box-sizing: border-box;
+    width: 275px;
+    height: 205px;
+    border-radius: 0px !important;
+    box-shadow: 0 0 8px 2px rgba(0,0,0,.1);
+}
+
+.cp-color-picker .cp-panel {
+    width: 75px;
+    line-height: 21px;
+    float: right;
+    overflow: visible
+}
+.cp-color-picker .cp-panel div {
+    margin-bottom: 4px;
+    padding-left: 10px;
+    display: inline-block;
+}
+.cp-color-picker .cp-panel div label {
+    width: 10px;
+    float: left;
+    text-align: left;
+    line-height: 20px;
+    padding-right: 4px;
+    display: inline-block;
+}
+.cp-color-picker .cp-panel div input {
+    width: 50px;
+    height: 20px;
+    font-size: 12px;
+    padding: 4px 2px;
+    box-sizing: border-box;
+    text-align: right;
+    color: #a7a7a7;
+    background-color: #ffffff;
+    border: 1px solid #e3e7e8;
+    box-shadow: 2px 2px 6px #f5f5f5 inset, -2px -2px 6px #f5f5f5 inset;
+    display: inline-block;
+}
+.cp-color-picker .cp-panel div input:focus {
+    background-color: #e2f2fe;
+    box-shadow: none;
+}
+.cp-color-picker .cp-panel hr {
+    border-top: 1px solid #e3e7e8;
+    border-left: none;
+    border-right: none;
+    border-bottom: none;
+}
+
+.cp-color-picker .cp-z-slider {
+    height: 160px;
+}
+
+.cp-color-picker .cp-xy-slider {
+    width: 160px;
+    height: 160px;
+}
+.cp-color-picker .cp-xy-slider:active {
+    cursor: none;
+}
+
+.cp-color-picker .cp-disp {
+    float: left;
+    clear: both;
+}
+
+.cp-color-picker .cp-disp button {
+    width: 78px;
+    height: 25px;
+}
+
+.cp-color-picker .cp-disp #cp-submit {
+    color: white;
+    text-align: center;
+    background-color: #3498db;
+    border: 1px solid #e3e7e8;
+    box-shadow: 1px 1px 1px #8ccbee inset;
+}
+
+.cp-color-picker .cp-disp #cp-submit:hover {
+    cursor: pointer;
+    background-color: #1d6fa5;
+}
+
+.cp-color-picker .cp-disp #cp-cancel {
+    margin-left: 4px;
+    text-align: center;
+    color: #3498db;
+    background-color: #f7f9fa;
+    border: 1px solid #e3e7e8;
+    box-shadow: 1px 1px 1px #fff inset;
+}
+
+.cp-color-picker .cp-disp #cp-cancel:hover {
+    cursor: pointer;
+    box-shadow: none;
+    background-color: #c8d6dd;
+}
+/* color picker */
diff --git a/src/css/desktop.css b/src/css/desktop.css
@@ -0,0 +1,10 @@
+.plugin-space-heading {
+  font-size: 1.5rem;
+  margin: 0.8rem;
+}
+.plugin-space-message {
+  display: inline-block;
+  font-size: 1.2em;
+  margin: 0.8rem;
+  margin-top: 0;
+}
diff --git a/src/html/config.html b/src/html/config.html
@@ -0,0 +1,98 @@
+<section id="plugin_setting_form" class="settings">
+  <h2 id="plugin_titile" class="settings-heading">{{html:lang.plugin_titile}}</h2>
+  <p id="plugin_description" class="kintoneplugin-desc">{{html:lang.plugin_description}}</p>
+  <form class="js-submit-settings">
+    <p class="kintoneplugin-row">
+      <label id="plugin_label" class="kintoneplugin-label">{{html:lang.plugin_label}}</label>
+      <br>
+    </p>    
+    <table class="cf-plugin-text-table kintoneplugin-table">
+      <thead>
+        <!--  column -->
+        <tr>
+          <th class="kintoneplugin-table-th">
+            <span class="title">{{html:lang.text_color_titile}}</span>
+          </th>
+          <th class="kintoneplugin-table-th">
+            <span class="title">{{html:lang.back_color_titile}}</span>
+          </th>
+          <th class="kintoneplugin-table-th">
+            <span class="title">{{html:lang.text_size_titile}}</span>
+          </th>
+          <th class="kintoneplugin-table-th">
+            <span class="title">{{html:lang.text_font_titile}}</span>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr class="cf-plugin-text-line">
+          <td>
+            <div class="kintoneplugin-table-td-control">
+              <div class="kintoneplugin-table-td-control-value">
+                <div>
+                  <input type="text" class="kintoneplugin-input-text text_color_now" maxlength="7" value="#000000" id="text_color"/>
+                  <i class="color-paint-brush" value="#000000">
+                    <svg width="15px" height="15px"  fill="#676767" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M167.02 309.34c-40.12 2.58-76.53 17.86-97.19 72.3-2.35 6.21-8 9.98-14.59 9.98-11.11 0-45.46-27.67-55.25-34.35C0 439.62 37.93 512 128 512c75.86 0 128-43.77 128-120.19 0-3.11-.65-6.08-.97-9.13l-88.01-73.34zM457.89 0c-15.16 0-29.37 6.71-40.21 16.45C213.27 199.05 192 203.34 192 257.09c0 13.7 3.25 26.76 8.73 38.7l63.82 53.18c7.21 1.8 14.64 3.03 22.39 3.03 62.11 0 98.11-45.47 211.16-256.46 7.38-14.35 13.9-29.85 13.9-45.99C512 20.64 486 0 457.89 0z"/></svg>
+                  </i>
+                </div>
+              </div>
+            </div>
+          </td>
+          <td>
+            <div class="kintoneplugin-table-td-control">
+              <div class="kintoneplugin-table-td-control-value">
+                <div>
+                  <input type="text" class="kintoneplugin-input-text back_color_now" maxlength="7" value="#FFFFFF" id="back_color"/>
+                  <i class="color-paint-brush" value="#000000">
+                    <svg width="15px" height="15px"  fill="#676767" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M167.02 309.34c-40.12 2.58-76.53 17.86-97.19 72.3-2.35 6.21-8 9.98-14.59 9.98-11.11 0-45.46-27.67-55.25-34.35C0 439.62 37.93 512 128 512c75.86 0 128-43.77 128-120.19 0-3.11-.65-6.08-.97-9.13l-88.01-73.34zM457.89 0c-15.16 0-29.37 6.71-40.21 16.45C213.27 199.05 192 203.34 192 257.09c0 13.7 3.25 26.76 8.73 38.7l63.82 53.18c7.21 1.8 14.64 3.03 22.39 3.03 62.11 0 98.11-45.47 211.16-256.46 7.38-14.35 13.9-29.85 13.9-45.99C512 20.64 486 0 457.89 0z"/></svg>  
+                  </i>
+                </div>
+              </div>
+            </div>
+          </td>
+          <td>
+            <div class="kintoneplugin-select">
+              <select id="text_size">
+                <option value=""       >{{html:lang.text_size_nomal}}</option>
+                <option value="x-small">{{html:lang.text_size_x_small}}</option>
+                <option value="small"  >{{html:lang.text_size_small}}</option>
+                <option value="large"  >{{html:lang.text_size_large}}</option>
+                <option value="x-large">{{html:lang.text_size_x_large}}</option>
+              </select>
+            </div>
+          </td>
+          <td>
+            <div class="kintoneplugin-select">
+              <select  id="text_font">
+                <option value=""            >{{html:lang.text_font_normal}}</option>
+                <option value="bold"        >{{html:lang.text_font_bold}}</option>
+                <option value="underline"   >{{html:lang.text_font_underline}}</option>
+                <option value="line-through">{{html:lang.text_font_line_through}}</option>
+                <option value="link"        >{{html:lang.text_font_link}}</option>
+               </select>
+            </div>
+          </th>
+        </tr>
+      </tbody>        
+    </table>
+    <br>
+    <p class="kintoneplugin-row">
+        <button type="button" id="plugin_cancel" class="kintoneplugin-button-dialog-cancel">{{html:lang.plugin_cancel}}</button>
+        <button type="button" id="plugin_ok" class="kintoneplugin-button-dialog-ok">{{html:lang.plugin_ok}}</button>
+    </p>
+  </form>
+<!-- ↓ は広告なので 削除したい人は削除して使って下さい -->
+  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8848137110933190"
+      crossorigin="anonymous"></script>
+  <!-- KintoneDisplay -->
+  <ins class="adsbygoogle"
+      style="display:block"
+      data-ad-client="ca-pub-8848137110933190"
+      data-ad-slot="3643192887"
+      data-ad-format="auto"
+      data-full-width-responsive="true"></ins>
+  <script>
+      (adsbygoogle = window.adsbygoogle || []).push({});
+  </script>
+<!-- ↑ は広告なので 削除したい人は削除して使って下さい -->
+</section>
diff --git a/src/image/icon.png b/src/image/icon.png