Terminal: 功能请求 - 实现设置 UI

创建于 2019-06-24  ·  62评论  ·  资料来源: microsoft/terminal

新功能/增强功能摘要

为 Windows 终端实现设置 UI。 此 UI 应读取并更新 settings.json 文件。 如果需要,用户应该仍然能够直接编辑 JSON。

规格和设计:#6720

实施计划

来自@carlos-zamora。 我们正在处理feature/settings-ui分支。 它运行与master相同的 CI。 我们的想法是,您制作针对feature/settings-ui PR,当设置 UI 准备好交付时,我们将其合并到master

我们基本上从#7370 开始。

后端

这些工作项通常不会涉及_任何_ UI 或 XAML。

  • [X] #885 - 终端设置模型

    • 这是能够访问设置文件的内容所必需的。 设置对象必须是 COM 对象。 然后可以将它们暴露给设置 UI 以读取和修改 Windows 终端的设置。 (公关#7667,#7830)

    • 规格:#6904

  • [] 将设置写入 JSON

    • [x]第 1 部分:JsonUtils 包含ConversionTrait ,用于将设置从 JSON 转换为我们的设置对象 ( FromJson() )。 我们应该能够向ConversionTrait引入一个ToJson()函数。 这将主要处理被转换为其枚举值的单个设置。 (公关#7609)

    • [ ]第 2 部分:将ToJson()作为完整设置对象(即:Profile、GlobalAppSettings 等)的函数引入(PR #8018)

    • [ ]第 3 部分:将第 2 部分的输出 JSON 分层到用户的现有设置上。 我们需要确保我们不会覆盖用户发表的任何评论。

  • [x] 更新openSettings命令以打开设置 UI

    • 规格:#5915

    • 公关:#7802

中端

这些工作项可能会涉及一些 XAML。 您将不得不接触TerminalSettingsEditor项目,但您不会太沉迷于图标、边距等的润色。

  • [x] 将设置 UI 作为选项卡嵌入 Windows 终端 (TerminalApp)

    • TerminalSettingsEditor转换为 DLL

    • TerminalSettingsEditor放入终端的选项卡中

    • 加分项:我们应该一次只打开一个设置 UI

    • PR:#7675、#7802

  • [X]替换ObjectModel在原型与真实对象TerminalSettingsModel对象引用
  • [ ] Data 将设置绑定到TerminalSettingsModel

    • 全局设置

    • 简介:



      • 配置文件列表 --> 导航栏


      • 配置文件设置



    • 配色方案:



      • 配色方案列表 --> 下拉菜单


      • 颜色



    • 键绑定

PR 的各种后续跟进

  • [ ] 对新配置文件和现有配置文件使用相同的 UI。
  • [ ] ColorSchemes.xaml按钮颜色弹出按钮应该全部在一个控件中。
  • [x] 确保所有字符串都附加到 UID。 (公关#7833)
  • [ ] 命令行处理需要健壮和智能。
  • [x] 将可本地化的字符串推入Resources.resw (PR #7833)
  • [x] 根据 #7802 使用Command的魔术图标处理程序对UtilsGetFontIcon函数进行重复数据删除
  • [X] 隐藏警告,并将保存/重置按钮更改为应用/丢弃(PR #8082)

    • 我们还没有一个系统来检测变化,所以这将在此期间完成。

前端

这些工作项目包括更多的设计工作。 请务必查看 #6720 中的模型。

  • [X] 更新图标 (PR #8013)

    • 型材:E756

    • 外观:E771

    • 配色方案:E790

    • 启动:E7B5

  • [X] 连接按钮打开 JSON 设置(见 #5915)(PR #8059)
  • [ ] 添加并连接“保存”按钮

奖励积分

  • [ ] 搜索设置
  • [ ] 主页
  • [] 图标和背景图像的图像预览
  • [ ] 在配置文件的“外观”页面中嵌入终端控件

    • 这应该会随着您对颜色、背景图像、字体等所做的更改而实时更新。

    • 需要一个专门为此设计的新终端连接(或者甚至在那里扔一个完全可操作的终端,当然!)

  • [ ] 标签标题根据当前打开的 SUI 页面而变化。
  • [ ] 实现键盘页面(按键绑定)

    • 有关更多详细信息,请参阅 #6720

错误

这些是团队在我们自​​托管功能分支时发现的错误。 此方法将一直使用,直到功能分支合并到 master 分支为止。 届时,我们将正常提交错误。

  • [x] 没有出现 TSM 和 TSE 本地化

    • 更多信息:构建创作错误:将<Import Project="$(SolutionDir)build\rules\CollectWildcardResources.targets" />到 TSM 和 TSE vcxproj (PR #7966 #7967)

  • [x]“未保存的更改”的东西阻碍了页面底部的设置,并且无法向上滚动
  • [ ] 未本地化的字符串:

    • [X] SettingsTab上的“设置”(PR #8012)

    • [ ] UI 导航菜单中的“全局”(在配置文件下)

    • 这个字符串已经有一个 uuid 并且在 resw 中定义。 需要深入探索。

  • [X] 如果保存/重置按钮的字符串太长,则会被裁剪 (PR #8082)
  • [X] 配置文件 - 全局 - 高级页面上的间距不正确 (PR #8065)
  • [x] 隐藏 1.5 版本的键盘页面 (PR #8078)
  • [x] 隐藏 1.5 版本的主页 (PR #8078)

设计

通过@cinnamon-msft。 这些设计中的内容不是最终的,将被修改。 他们来这里只是为了演示。

navigation-2

appearance

Area-Settings Area-User Interface Issue-Scenario Product-Terminal

最有用的评论

您将如何在不同配置文件的设置之间移动?

也许您可以在左侧 NavigationPane 中实现一个 ComboBox 来选择一个配置文件,该设置将应用到该配置文件?

image
_你的手机可以做到这一点_

image


即使您决定不将 Acrylic 用于设置的 NavigaitonView 窗格,能否请您扩展标题栏以使导航视图接触窗口顶部?

image

image

image

所有62条评论

在任何人询问之前,_是_该计划包括对可以合理预期在终端中看到的事物进行良好的实时预览。

您将如何在不同配置文件的设置之间移动?

也许您可以在左侧 NavigationPane 中实现一个 ComboBox 来选择一个配置文件,该设置将应用到该配置文件?

image
_你的手机可以做到这一点_

image


即使您决定不将 Acrylic 用于设置的 NavigaitonView 窗格,能否请您扩展标题栏以使导航视图接触窗口顶部?

image

image

image

目前的计划是在左侧菜单中有一个配置文件项,在主要内容区域中有一个所有配置文件的下拉列表,根据 JSON 属性填充字段和一个预览窗口以显示更新的设置。
我们还没有嘲笑这个😊

关于配色方案:根据 #1750,所有 iTerm2 配色方案都已移植到 Windows Terminal

需要明确的是,目前(2019 年 7 月 7 日,星期日)根本没有设置功能,对吗? 单击三角形下拉菜单中的“设置”菜单项对我的系统没有影响。

需要明确的是,目前(2019 年 7 月 7 日,星期日)根本没有设置功能,对吗? 单击三角形下拉菜单中的“设置”菜单项对我的系统没有影响。

它_应该_打开profiles.json文件,它允许您更改设置-但最终会为该文件提供一个GUI。

需要明确的是,目前(2019 年 7 月 7 日,星期日)根本没有设置功能,对吗? 单击三角形下拉菜单中的“设置”菜单项对我的系统没有影响。

它_应该_打开profiles.json文件,它允许您更改设置-但最终会为该文件提供一个GUI。

当我单击设置菜单选项时,它没有任何效果。 我正在使用 Windows 商店的预览。 我应该下载并构建吗?

当我单击设置菜单选项时,它没有任何效果。 我正在使用 Windows 商店的预览。 我应该下载并构建吗?

它应该在 json 文件的默认编辑器中打开 profiles.json 文件。 也许您在 Windows 中没有默认设置?

新的预览版本将于 30 日到期,所以如果您想测试一些稳定的东西,请稍等片刻

需要明确的是,目前(2019 年 7 月 7 日,星期日)根本没有设置功能,对吗? 单击三角形下拉菜单中的“设置”菜单项对我的系统没有影响。

它_应该_打开profiles.json文件,它允许您更改设置-但最终会为该文件提供一个GUI。

当我单击设置菜单选项时,它没有任何效果。 我正在使用 Windows 商店的预览。 我应该下载并构建吗?

也许您应该先检查默认的 JSON 文件编辑器。

windows_terminal_settings_ui

我对设置 UI 的想法。
设置页面应该是一个叠加层。
首页:全屏闪屏覆盖,如窗口设置。
选项卡“配置文件”:每个配置文件都有自己的子菜单选项卡,您可以在其中设置名称、命令行、起始目录、启动参数、字体、字体大小、亚克力、不透明度、背景颜色或图像、字体颜色和图标。 选择应实时更新预览。
选项卡“常规”:这是设置页面,具有光标大小、整体字体和字体大小等常规设置。 应在此处选择一些也是全局的其他设置。
“General”的第二个子菜单是布局,您可以在其中调整缓冲区大小、窗口大小和位置。

使用设置旁边的 X 关闭设置覆盖。
使用 General 或 Profiles 旁边的箭头返回设置“Splash screen”

https://youtu.be/veqs2WVou9M?t=525(5秒)——达斯汀,来吧... :stuck_out_tongue: :stuck_out_tongue: :stuck_out_tongue:

windows_terminal_settings_ui

我对设置 UI 的想法。
设置页面应该是一个叠加层。
首页:全屏闪屏覆盖,如窗口设置。
选项卡“配置文件”:每个配置文件都有自己的子菜单选项卡,您可以在其中设置名称、命令行、起始目录、启动参数、字体、字体大小、亚克力、不透明度、背景颜色或图像、字体颜色和图标。 选择应实时更新预览。
选项卡“常规”:这是设置页面,具有光标大小、整体字体和字体大小等常规设置。 应在此处选择一些也是全局的其他设置。
“General”的第二个子菜单是布局,您可以在其中调整缓冲区大小、窗口大小和位置。

使用设置旁边的 X 关闭设置覆盖。
使用 General 或 Profiles 旁边的箭头返回设置“Splash screen”

设置 UI 的想法将节省大量时间和精力来自定义终端,我尝试添加一个新的配置文件以及个性化设置,它花费了相当多的时间,包括在 Google 上检查如何执行此操作以及保存它(profile.json)并重新启动终端以查看它是否有效。 如果不是,则重复。 (是的,我不擅长以这种方式手动执行此操作,并且更喜欢使用 UI。这是个人偏好,不仅由我共享,其他人也共享)。

这里引用的mock UI,虽然没有完善,缺少一些东西(包括添加背景图片),但比手动编辑json文件要好得多。 此功能非常重要,应该在下一个主要预览版本或最终版本中可用,因为这将使用户能够专注于终端对多个自定义以及预览更改的反应。

同时,这是一个开发者工具。 预计会有一些手动配置文件编辑,甚至可能晚至 1.0。 而且您无需重新启动终端即可查看编辑效果。

windows_terminal_settings_ui
我对设置 UI 的想法。
设置页面应该是一个叠加层。
首页:全屏闪屏覆盖,如窗口设置。
选项卡“配置文件”:每个配置文件都有自己的子菜单选项卡,您可以在其中设置名称、命令行、起始目录、启动参数、字体、字体大小、亚克力、不透明度、背景颜色或图像、字体颜色和图标。 选择应实时更新预览。
选项卡“常规”:这是设置页面,具有光标大小、整体字体和字体大小等常规设置。 应在此处选择一些也是全局的其他设置。
“General”的第二个子菜单是布局,您可以在其中调整缓冲区大小、窗口大小和位置。
使用设置旁边的 X 关闭设置覆盖。
使用 General 或 Profiles 旁边的箭头返回设置“Splash screen”

设置 UI 的想法将节省大量时间和精力来自定义终端,我尝试添加一个新的配置文件以及个性化设置,它花费了相当多的时间,包括在 Google 上检查如何执行此操作以及保存它(profile.json)并重新启动终端以查看它是否有效。 如果不是,则重复。 (是的,我不擅长以这种方式手动执行此操作,并且更喜欢使用 UI。这是个人偏好,不仅由我共享,其他人也共享)。

这里引用的mock UI,虽然没有完善,缺少一些东西(包括添加背景图片),但比手动编辑json文件要好得多。 此功能非常重要,应该在下一个主要预览版本或最终版本中可用,因为这将使用户能够专注于终端对多个自定义以及预览更改的反应。

很高兴你喜欢。 是的,缺少背景图像选择按钮。 但是有这个空间..

设置 UI 不需要涵盖您可以设置的每个设置。 任何影响应用程序视觉效果的东西都应该在那里。 应该有一个打开 JSON 文件的链接。 您可以添加的完整设置列表的链接应该在那里。

诸如光标形状、亚克力、背景图像、颜色之类的预览 - 会很有意义,因此有人可以在提交之前尝试配色方案。

此外,由于某些设置是每个配置文件,而其他设置是应用程序范围的 - 某种下拉菜单来选择要编辑的配置文件,这可能是一个好主意。

设置 UI 不需要涵盖您可以设置的每个设置。 任何影响应用程序视觉效果的东西都应该在那里。 应该有一个打开 JSON 文件的链接。 您可以添加的完整设置列表的链接应该在那里。

诸如光标形状、亚克力、背景图像、颜色之类的预览 - 会很有意义,因此有人可以在提交之前尝试配色方案。

此外,由于某些设置是每个配置文件,而其他设置是应用程序范围的 - 某种下拉菜单来选择要编辑的配置文件,这可能是一个好主意。

我的概念中的第二张图片显示了配置文件(在左侧)及其主页上的设置。

我的概念中的第二张图片显示了配置文件(在左侧)及其主页上的设置。

不久前我做了一个类似的模型:)
terminal_settings

我认为这将是一个重大改进。 请问这个可以尽快推出吗?

@yellow-starburst 您通常可以使用我们的里程碑和项目视图(或任何特定问题的活动里程碑)来解决这个问题。 设置 UI 不在 1.0 版计划中。

我尝试使用 Python 和 Tkinter 为profiles.json 文件制作一个小的UI。 虽然 UI 不是很好,也没有真正遵循 Windows 10 设计方案(因为我只熟悉这些技术),但它完成了编辑 profiles.json 文件的工作。

如果有人愿意,他们可以在这里查看

@DHowett-MSFT 虽然这不在 1.0 的范围内,但它不会被 1.0 的外部开发人员接受吗?

@SamuelEnglard总是欢迎外部 PR,无论他们针对什么问题/功能请求。

几乎是的。 如果你能在 1.0 的时间框架内把一些东西放在一起,我们很乐意接受它,但这可能是一个很高的要求 😝

所以,这个需要一点小心。 Kayla 对她想要实现的目标有自己的愿景,但我认为这是我们可以与公众沟通的事情。 无论如何,我们不会为 v1.0 推出一些东西,但我绝对不想阻止社区在这个方面的工作 :smile:

我的想法更多是你可能不想花时间审查它来专注于 1.0 的事情。

@mdtauk我很喜欢你的模型

一个建议:删除 [+] 添加新配置文件,而是在配置文件名称旁边放置一个 +(我想它是一个下拉菜单?)

编辑:
在对建议的模型进行更长时间的研究后,我得出的结论是,空白空间太多,控件很大,几乎就像设置菜单针对移动/平板电脑用户一样......专为滚动/触摸设备设计的东西

我认为它需要分为四个部分:

  • 全局设置
    > 显示所有常用设置,按类别分组。 使用标签来防止滚动。
  • 键盘方案
    > 允许对键盘快捷键进行命名、标记和分组。 打印备忘单的按钮会很棒。
  • 主题/视觉方案
    > 用于为“主题”选择颜色的丰富 UI,能够选择背景图像、名称、标签和组主题,以及使用 JSON/YAML 导入/导出主题。 “变体”按钮将启动一个克隆的新主题,但两个按钮“更暗”/“更亮”将逐渐使主题变暗或变亮,以帮助为组中的个人资料创建变体。
  • 简介
    > 能够命名、标记和分组配置文件(组将在选项卡弹出菜单中分开以直观地组织它们)。 选择它们将使用轮播中每个主题的预览。 键盘方案将从下拉列表中选择。 当配置文件被标记或分组时,如果存在匹配的项目,它将自动选择主题和键盘方案。 配置文件可以导出为 JSON。

所有可导出的 JSON 都可以使用 powershell 脚本打包为 nuget 档案,以将项目导入到当前用户的设置中。

除了随机使用 NuGet 之外,所有这些点似乎都是合理的 😄

NuGet 档案只是带有额外元数据的 zip 文件,这对于需要内置到 C++/C#/WinJS/etc 中的东西的二进制发行版来说真的很好和有用。 项目不仅仅是作为通用配置导出格式。 JSON 已经可以按原样导出。

除了随机使用 NuGet 之外,所有这些点似乎都是合理的 😄

它不是随机的,它旨在促进使用 Nuget 服务器共享设置和配置文件。 我目前正在开发一个应用程序和网站,它将成为人们可以共享和下载的 Windows 终端配置文件库。 使用 JSON 很容易将数据获取到配置文件,但我想支持许多不同的场景,其中一个是完全离线的场景,用户不必编辑任何 JSON 文件,可以作为设置的一部分包含在内服务器或容器。 为方便起见,JSON 封装在 Nuget 中,并带有 PS 安装和卸载脚本,该脚本将从配置中导入/删除 JSON。

为方便起见,JSON 封装在 Nuget 中,并带有 PS 安装和卸载脚本,该脚本将从配置中导入/删除 JSON。

这么巧克力? 制作一个 PowerShell cmdlet 来创建配置文件的巧克力包不应该那么难。

为方便起见,JSON 封装在 Nuget 中,并带有 PS 安装和卸载脚本,该脚本将从配置中导入/删除 JSON。

这么巧克力? 制作一个 PowerShell cmdlet 来创建配置文件的巧克力包不应该那么难。

这个想法是为了 nuget 生成和导入被烘焙,以便不需要 3rd 方工具

完全离线的场景,用户无需编辑任何 JSON 文件,并且可以作为服务器或容器设置的一部分包含在内

很可能他们已经在使用一些 3rd 方工具来做到这一点,巧克力是可能的选择之一。 与这些工具集成对我来说似乎是最好的选择。

nuget 集成不是_必需的_,但会树立一个很好的先例,也将成为狗粮......

本终端是一款UWP应用,采用Fluent设计,高度可定制。 也许看看它和Windows Terminal类似的形状吗? 我的意思是,即使那个终端看起来也不错(尽管它处于早期阶段)。

IMO 如果整个设置应用程序(或页面)有一个像终端一样的背景亚克力(亚克力根据设置页面中设置的亚克力设置而变化),它看起来会很好

请记住,设置面板在 Windows 中应该保持一致。 您可能有关于设置面板在 Windows 中的外观的反馈,但终端 GitHub 不是讨论它们的最佳场所。 发送有关设置面板在 Windows 中的外观的想法的地方是反馈应用程序。

你为什么审查我的评论?

我只是说它看起来像是为平板电脑制作的用户界面?

微软的审查水平太疯狂了

@russhy我删除了您的评论,因为它使用的特定语言违反了我们的行为准则,而不是因为您认为我们的 UI 看起来像平板电脑 UI。 我并不特别关心你说什么,只要你尊重地表达自己。

哦,我明白了,我将来会尝试使用正确的语言,但请让我知道而不是仅仅删除内容
@DHowett-MSFT

@russhy确定,抱歉。 :微笑:

一种

高级用户默认为json文件视图怎么样? 这样用户就可以按照自己的方式编辑设置。

本终端是一款UWP应用,采用Fluent设计,高度可定制。 也许看看它和Windows Terminal类似的形状吗? 我的意思是,即使那个终端看起来也不错(尽管它处于早期阶段)。

那个项目非常棒! 甚至各种字体都能完美呈现。 不幸的是,它比终端慢。 Hope Terminal 受到该项目的启发,同时保持超级活泼!

🦙 看起来这很适合WinUI 中

我同意@michael-hawker - 但我认为 Form Control 仍处于提案阶段?

对于 PowerToys,我们付出了很多努力来使 XAML 正确:所有字体大小、边距、填充和其他属性都模仿 W10 设置应用程序。 通过这种方式,它的外观和感觉都是 Windows 原生的,我认为共享相同的 UX 会很棒吗?

我很高兴通过创建根据规范所需的所有 XAML 做出贡献......并对其进行完善。 @zadjii-msft @DHowett 。 是否已经有一个活跃的分支?

81483649-0e146000-9240-11ea-86be-1c6e1d56a856

我相信有各种各样的 WIP 分支,但老实说,我不知道哪些是活跃的或不活跃的。 我相信 @carlos-zamora 和 @cinnamon-msft _do_ 知道

最新的分支是cinnamon/settings-ui-v2 。 我们将设置 UI 实现为一个单独的应用程序,可以在 src/TerminalSettings 下找到。

我们仍在努力为整个设置 UI 组织一个计划/规范,所以现在可以随意清理全局和配色方案页面,或者四处看看。

为了记录,我们仍然需要计划的一些事情是......

  • 对“个人资料”页面的更改
  • Keybindings 页面的整体设计
  • 如何同步 JSON 和设置 UI
    我们有一些想法,但我们很快就会提出所有这些的实际规范。

我如何执行应用程序(设置页面)?

我如何执行应用程序(设置页面)?

设置 UI 正在积极开发中,尚未出现在 Windows 终端中。

是的,我知道这一点,但不是可以测试配置页面的原型,看看它的外观吗? 因为在主题的开头有原型的图像。

我相信这些只是在 Figma 中制作的 UI 模型,而不是可以玩的实际原型。

我用这个假设的原型下载了一个 zip,现在我不知道如何运行它
Anotação 2020-07-08 164816

我相信这些只是在 Figma 中制作的 UI 模型,而不是可以玩的实际原型。

是的,它可能是,但图像似乎如此真实......

@Viniacamp您需要自己编译应用程序。 src\TerminalSettings目录中有一个TerminalSettings.sln文件,您可以在 Visual Studio 中打开该文件,然后构建并运行。 但是如果你不知道你在做什么,你可能很难让它工作 - 我知道我不得不弄乱项目文件来调整我系统的包路径。 另请注意,目前还没有太多可看的东西 - 它只是一些屏幕的一些模型,并且不包括发布在问题顶部的任何图像。

“未保存的更改”东西阻碍了页面底部的设置,并且无法向上滚动。

会有自动保存功能吗? 就像您选中复选按钮、切换切换开关或更改任何设置一样,它们会被保存吗? (基于事件的保存功能)

@SFM61319因为当设置文件更改时所有打开的终端实例都会自动更新,我们认为保存每个状态更改都太危险和破坏性。 在编辑时,配置单个配置文件会将每个终端窗口变成字体大小和颜色的绝对万花筒。

@DHowett等等我知道启用自动保存的设置(在设置中)怎么样?

Ctrl + S保存设置,以便不必单击保存按钮(如果自动保存不是一项功能)? (键绑定使东西更易于使用)

我一直在想,是否有计划为 ColorScheme 添加导入和导出按钮/选项?

我知道有 JSON 设置页面,但支持导入现有的配色方案(如 iTerm、JSON 甚至原始 TXT 文件)也很有用。

@leonmsft你会认为我疯了,但是..配色方案页面混合了所有颜色 o_O

  1. 选择坎贝尔

image

  1. 键盘向下到坎贝尔 powershell

image

  1. 键盘备份到坎贝尔

image

此页面是否有帮助?
0 / 5 - 0 等级