合入输入法选择对话框布局

Signed-off-by: zhouyongfei <zhouyongfei@huawei.com>

services/BUILD.gn

@@ -73,6 +73,8 @@ ohos_shared_library("inputmethod_service") {
     "//utils/native/base:utils",
   ]
 
+  deps += [ "//base/miscservices/inputmethod/services/dialog/js:dialog_ime_js_files_etc" ]
+
   external_deps = [ "hiviewdfx_hilog_native:libhilog" ]
 
   subsystem_name = "miscservices"

services/dialog/js/BUILD.gn

@@ -0,0 +1,25 @@
+# Copyright (c) 2022 Huawei Device Co., Ltd.
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+import("//foundation/ace/ace_engine/build/ace_gen_sa_dialog_js.gni")
+
+gen_sa_dialog_js("dialog_ime_js_files_etc") {
+  project_path = "//base/miscservices/inputmethod/services/dialog/js/"
+  i18n_files = [
+    "i18n/en-US.json",
+    "i18n/zh-CN.json",
+  ]
+  common_files = []
+  dialog_name = "input_method_choose_dialog"
+  part_name = "inputmethod_native"
+  subsystem_name = "miscservices"
+}

services/dialog/js/i18n/en-US.json

@@ -0,0 +1,6 @@
+{
+  "strings": {
+    "setIme": "Set Default Ime",
+    "dialogTitle": "Select Ime"
+  }
+}

services/dialog/js/i18n/zh-CN.json

@@ -0,0 +1,6 @@
+{
+  "strings": {
+    "setIme": "配置默认输入法",
+    "dialogTitle": "选择输入法"
+  }
+}

services/dialog/js/pages/index/index.css

@@ -0,0 +1,71 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    left: 0fp;
+    top: 0fp;
+    width: 100%;
+    height: 100%;
+}
+
+.title {
+    font-size: 20fp;
+    text-align: start;
+    width: 100%;
+    height: 28fp;
+    margin-top: 12fp;
+    margin-left: 23fp;
+    margin-right: 25fp;
+    color:#000000;
+}
+
+.btn {
+    width: 50%;
+    height: 100fp;
+    font-size: 40fp;
+}
+
+.list {
+    width: 100%;
+    height: 100%;
+    margin-top: 22fp;
+}
+
+.listItem {
+    width: 100%;
+    height: 42fp;
+    margin-top: 12fp;
+    margin-bottom: 12fp;
+}
+
+.imeName {
+    width: 100%;
+    height: 22fp;
+    font-size: 16fp;
+    weight:medium;
+    color:#000000;
+}
+
+.imeDecription {
+    width: 100%;
+    height: 22fp;
+    font-size: 13fp;
+    weight:medium;
+    margin-top: 2fp;
+    color:#66000000;
+}
+
+.imeMessage {
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    margin-left: 23fp;
+}
+
+.circle {
+    width: 24fp;
+    height: 24fp;
+    margin-left: 12fp;
+    margin-right: 24fp;
+}

services/dialog/js/pages/index/index.hml

@@ -0,0 +1,19 @@
+<div class="container" onswipe="touchMove">
+    <text class="title">
+        {{ dialogTitle }}
+    </text>
+    <list class="list">
+        <list-item for="{{ imeList }}" class="listItem"
+                   onclick="changeDefaultIme({{ $item.ime }})">
+            <div class="imeMessage">
+                <text class="imeName">{{ $item.name }}</text>
+                <text class="imeDecription">{{ $item.discription }}</text>
+            </div>
+            <circle class="circle" cx="12px" cy="12px" r="12px" stroke-width="6px" fill="white" stroke="blue"
+                    show="{{ $item.isDefaultIme == 'true' ? true : false}}">
+            </circle>
+            <circle class="circle" cx="12px" cy="12px" r="12px" stroke-width="1px" fill="white" stroke="black"
+                    show="{{ $item.isDefaultIme === 'true' ? false : true }}"></circle>
+        </list-item>
+    </list>
+</div>

services/dialog/js/pages/index/index.js

@@ -0,0 +1,19 @@
+import router from '@ohos.router'
+
+export default {
+    data: {
+        imeList: router.getParams().imeList,
+    },
+    onInit() {
+        this.dialogTitle = this.$t('strings.dialogTitle');
+        this.setIme = this.$t('strings.setIme');
+    },
+    changeDefaultIme(ime) {
+        console.info('ImsaKit-dialog changeDefaultIme: ' + ime);
+        callNativeHandler("EVENT_CHANGE_IME", ime);
+    },
+    startImeSetting() {
+        console.info('ImsaKit-dialog startImeSetting');
+        callNativeHandler("EVENT_START_IME_SETTING", "");
+    }
+}