Skip to content

Commit

Permalink
Improve setting dialog UI
Browse files Browse the repository at this point in the history
  • Loading branch information
HashidaTKS committed Jan 22, 2025
1 parent 55a126e commit b007da1
Show file tree
Hide file tree
Showing 4 changed files with 125 additions and 32 deletions.
22 changes: 22 additions & 0 deletions src/web/dialog.css
Original file line number Diff line number Diff line change
Expand Up @@ -42,3 +42,25 @@ fluent-divider {
#cancel-button {
margin-left: 10px;
}

.dialog-content {
flex-grow: 1;
overflow-y: auto;
padding-left: 20px;
padding-right: 20px;
height: 100%;
}

.dialog-footer {
position: sticky;
bottom: 0;
padding: 10px;
text-align: center;
}

.dialog-body {
display: flex;
flex-direction: column;
height: 100%;
padding: 0;
}
42 changes: 42 additions & 0 deletions src/web/setting.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
html, body {
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
}


fluent-tab-panel {
padding-top: 20px;
height:100%;
}

.tab-container {
flex-direction: column;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
}

fluent-tabs {
align-items: stretch;
flex-flow: column;
justify-content: flex-start;
overflow: auto;
height: 100%;
}

#cancel-button {
margin-left: 10px;
}

fluent-text-area {
height: 100%;
width: 100%;
}

fluent-text-area::part(control){
height:100%;
}
68 changes: 36 additions & 32 deletions src/web/setting.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,38 +7,42 @@
<link href="dialog.css" rel="stylesheet">
<link href="setting.css" rel="stylesheet">
</head>
<body>
<fluent-tabs activeid="entrees">
<fluent-tab id="generalSetting">一般設定</fluent-tab>
<fluent-tab id="trustedDomains">社内ドメイン</fluent-tab>
<fluent-tab id="unsafeDomains">注意が必要なドメイン</fluent-tab>
<fluent-tab id="unsafeFiles">注意が必要なファイル名</fluent-tab>
<fluent-tab id="about">このアドオンについて</fluent-tab>
<fluent-tab-panel id="generalSettingPanel">
<fluent-checkbox>メール送信前のカウントダウンを有効化する</fluent-checkbox><br />
<fluent-checkbox>カウントダイアログの「いますぐ送信ボタン」を有効化する</fluent-checkbox><br />
送信までのカウントダウン秒数: <fluent-text-field></fluent-text-field><br />
<fluent-checkbox>To/Ccに一定数以上のドメインが含まれている場合に警告する</fluent-checkbox><br />
警告対象となるドメインの数: <fluent-text-field></fluent-text-field> 件以上 <br />
<fluent-checkbox>宛先が社内ドメインのみの場合は確認をスキップする</fluent-checkbox>
</fluent-tab-panel>
<fluent-tab-panel id="trustedDomainsPanel">
<fluent-text-area></fluent-text-area>
</fluent-tab-panel>
<fluent-tab-panel id="unsafeDomainsPanel">
<fluent-text-area></fluent-text-area>
</fluent-tab-panel>
<fluent-tab-panel id="unsafeFilesPanel">
<fluent-text-area></fluent-text-area>
</fluent-tab-panel>
<fluent-tab-panel id="aboutPanel">
FlexConfirmMail
2025 ClearCode Inc. All rights reserved.
</fluent-tab-panel>
</fluent-tabs>
<div class="button-container">
<fluent-button id="send-button" onclick="onSend()">保存して終了</fluent-button>
<fluent-button id="cancel-button" onclick="onCancel()">キャンセル</fluent-button>
<body class="dialog-body">
<div class="dialog-content">
<fluent-tabs activeid="entrees">
<fluent-tab id="generalSetting">一般設定</fluent-tab>
<fluent-tab id="trustedDomains">社内ドメイン</fluent-tab>
<fluent-tab id="unsafeDomains">注意が必要なドメイン</fluent-tab>
<fluent-tab id="unsafeFiles">注意が必要なファイル名</fluent-tab>
<fluent-tab id="about">このアドオンについて</fluent-tab>
<fluent-tab-panel id="generalSettingPanel">
<fluent-checkbox>メール送信前のカウントダウンを有効化する</fluent-checkbox><br />
<fluent-checkbox>カウントダイアログの「いますぐ送信ボタン」を有効化する</fluent-checkbox><br />
送信までのカウントダウン秒数: <fluent-text-field></fluent-text-field><br />
<fluent-checkbox>To/Ccに一定数以上のドメインが含まれている場合に警告する</fluent-checkbox><br />
警告対象となるドメインの数: <fluent-text-field></fluent-text-field> 件以上 <br />
<fluent-checkbox>宛先が社内ドメインのみの場合は確認をスキップする</fluent-checkbox>
</fluent-tab-panel>
<fluent-tab-panel id="trustedDomainsPanel">
<fluent-text-area></fluent-text-area>
</fluent-tab-panel>
<fluent-tab-panel id="unsafeDomainsPanel">
<fluent-text-area></fluent-text-area>
</fluent-tab-panel>
<fluent-tab-panel id="unsafeFilesPanel">
<fluent-text-area></fluent-text-area>
</fluent-tab-panel>
<fluent-tab-panel id="aboutPanel">
FlexConfirmMail
2025 ClearCode Inc. All rights reserved.
</fluent-tab-panel>
</fluent-tabs>
</div>
<div class="dialog-footer">
<div class="button-container">
<fluent-button id="send-button" onclick="onSend()">保存して終了</fluent-button>
<fluent-button id="cancel-button" onclick="onCancel()">キャンセル</fluent-button>
</div>
</div>
</body>
</html>
25 changes: 25 additions & 0 deletions src/web/setting.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { DesignToken } from '@microsoft/fast-foundation';

const specialColor = DesignToken.create('special-color');

Office.onReady((info) => {
sendStatusToParent("ready");
console.log(specialColor);
});

function sendStatusToParent(status) {
const messageObject = { status: status };
const jsonMessage = JSON.stringify(messageObject);
Office.context.ui.messageParent(jsonMessage);
}

window.onSave = () => {
Office.context.roamingSettings.set("TrustedDomains", "[email protected]");
Office.context.roamingSettings.saveAsync();
console.log("saved");
console.log(Office.context.roamingSettings.get("TrustedDomains"));
};

window.onCancel = () => {
sendStatusToParent("cancel");
};

0 comments on commit b007da1

Please sign in to comment.