From 7f6e26f39690b1bc1965a31311411dea6764b0d9 Mon Sep 17 00:00:00 2001 From: Kodie Grantham Date: Fri, 28 Apr 2023 09:48:11 -0500 Subject: [PATCH] Implement menu bar and menu for windows --- docs/index.html.ejs | 76 +++++++++++++++++++++++++++++++++++++++++++++ style.css | 67 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 143 insertions(+) diff --git a/docs/index.html.ejs b/docs/index.html.ejs index c8eeb30..56628e1 100644 --- a/docs/index.html.ejs +++ b/docs/index.html.ejs @@ -38,6 +38,7 @@
  • Title Bar
  • Window contents
  • Status Bar
    • +
  • Menu Bar
  • TreeView
    • @@ -719,6 +720,81 @@ +
    + +
    +

    + You can render a menu bar with the menu-bar class, + then use a button element to render the menu item. + Finally, you can use a ul element with the menu + class to render a menu that the button will open. +

    + + <%- example(` +
    +
    +
    Untitled - Notepad
    +
    + + + +
    +
    +
    +
    + +
      +
    • New
      • +
    • Open...
      • +
    • Save
      • +
    • Save As...
      • +
    • +
    • Page Setup...
      • +
    • Print
      • +
    • +
    • Exit
      • +
    +
    +
    + +
      +
    • UndoCtrl+Z
      • +
    • +
    • CutCtrl+X
      • +
    • CopyCtrl+C
      • +
    • PasteCtrl+V
      • +
    • DeleteDel
      • +
    • +
    • Select All
      • +
    • Time/DateF5
      • +
    • +
    • Word Wrap
      • +
    • Set Font...
      • +
    +
    +
    + +
      +
    • Find...
      • +
    • Find NextF3
      • +
    +
    +
    + +
      +
    • Help Topics
      • +
    • +
    • About Notepad
      • +
    +
    +
    +
    + +
    +
    + `) %> +
    +

    TreeView

    diff --git a/style.css b/style.css index 5c22050..9637984 100644 --- a/style.css +++ b/style.css @@ -283,6 +283,32 @@ input[type="reset"]:disabled, background-position: top 3px left 4px; } +.menu-bar { + display: flex; +} + +.menu-bar .menu-bar-item { + position: relative; +} + +.menu-bar .menu-bar-item > button { + box-shadow: none; + min-height: 20px; + min-width: auto; + outline: none; + padding: 0 6px; +} + +.menu-bar .menu-bar-item > button:active, +.menu-bar .menu-bar-item > button:focus { + box-shadow: inset -1px -1px #fff, inset 0px 0px #0a0a0a, inset -1px -1px #dfdfdf, inset 1px 1px grey; + text-shadow: 0 0 #222; +} + +.menu-bar .menu-bar-item > button:focus + .menu { + display: block; +} + .status-bar { margin: 0px 1px; display: flex; @@ -300,6 +326,10 @@ input[type="reset"]:disabled, margin: var(--element-spacing); } +.window-body.frame { + margin: 2px; +} + fieldset { border-image: svg-load("./icon/groupbox-border.svg") 2; padding: calc(2 * var(--border-width) + var(--element-spacing)); @@ -647,6 +677,43 @@ a:focus { outline: 1px dotted var(--link-blue); } +ul.menu { + background: silver; + box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff; + display: none; + list-style-type: none; + margin: 0; + min-width: 100px; + padding: 2px; + position: absolute; + width: max-content; +} + +ul.menu > li:not(.divider) { + cursor: default; + padding: 3px 20px 3px 20px; +} + +ul.menu li:not(.disabled):not(.divider):hover { + background: var(--dialog-blue); + color: #fff; +} + +ul.menu li.disabled { + color: var(--button-shadow); +} + +ul.menu li.divider { + border-bottom: 1px solid #dfdfdf; + border-top: 1px solid grey; + margin: 2px; +} + +ul.menu li > span { + float: right; + margin-left: 10px; +} + ul.tree-view { display: block; background: var(--button-highlight);