Power-Menu

Creates a button on the bar, which opens a popup. The popup contains a header, shutdown button, restart button, and uptime.

Configuration

Corn

let {
    $button = { type = "button" name="power-btn" label = "" on_click = "popup:toggle" }

    $popup = {
        type = "box"
        orientation = "vertical"
        widgets = [
            { type = "label" name = "header" label = "Power menu" }
            {
                type = "box"
                widgets = [
                    { type = "button" class="power-btn" label = "<span font-size='40pt'></span>" on_click = "!shutdown now" }
                    { type = "button" class="power-btn" label = "<span font-size='40pt'></span>" on_click = "!reboot" }
                ]
            }
            { type = "label" name = "uptime" label = "Uptime: {{30000:uptime -p | cut -d ' ' -f2-}}" }
        ]
    }

    $power_menu = {
        type = "custom"
        class = "power-menu"

        bar = [ $button ]
        popup = [ $popup ]

        tooltip = "Up: {{30000:uptime -p | cut -d ' ' -f2-}}"
    }

    $clock = { type = "clock" }
} in {
    end = [ $power_menu $clock ]
}

JSON

{
  "end": [
    {
      "type": "custom",
      "class": "power-menu",
      "bar": [
        {
          "type": "button",
          "name": "power-btn",
          "label": "",
          "on_click": "popup:toggle"
        }
      ],
      "popup": [
        {
          "type": "box",
          "orientation": "vertical",
          "widgets": [
            {
              "type": "label",
              "name": "header",
              "label": "Power menu"
            },
            {
              "type": "box",
              "widgets": [
                {
                  "type": "button",
                  "class": "power-btn",
                  "label": "<span font-size='40pt'></span>",
                  "on_click": "!shutdown now"
                },
                {
                  "type": "button",
                  "class": "power-btn",
                  "label": "<span font-size='40pt'></span>",
                  "on_click": "!reboot"
                }
              ]
            },
            {
              "type": "label",
              "name": "uptime",
              "label": "Uptime: {{30000:uptime -p | cut -d ' ' -f2-}}"
            }
          ]
        }
      ],
      "tooltip": "Up: {{30000:uptime -p | cut -d ' ' -f2-}}"
    },
    {
      "type": "clock"
    }
  ]
}

YAML

end:
  - type: custom
    class: power-menu
    bar:
      - type: button
        name: power-btn
        label: 
        on_click: popup:toggle
    popup:
      - type: box
        orientation: vertical
        widgets:
          - type: label
            name: header
            label: Power menu
          - type: box
            widgets:
              - type: button
                class: power-btn
                label: <span font-size='40pt'></span>
                on_click: "!shutdown now"
              - type: button
                class: power-btn
                label: <span font-size='40pt'></span>
                on_click: "!reboot"
          - type: label
            name: uptime
            label: "Uptime: {{30000:uptime -p | cut -d ' ' -f2-}}"
    tooltip: "Up: {{30000:uptime -p | cut -d ' ' -f2-}}"
  - type: clock

TOML

[[end]]
type = "custom"
class = "power-menu"
tooltip = "Up: {{30000:uptime -p | cut -d ' ' -f2-}}"

  [[end.bar]]
  type = "button"
  name = "power-btn"
  label = ""
  on_click = "popup:toggle"

  [[end.popup]]
  type = "box"
  orientation = "vertical"

    [[end.popup.widgets]]
    type = "label"
    name = "header"
    label = "Power menu"

    [[end.popup.widgets]]
    type = "box"

      [[end.popup.widgets.widgets]]
      type = "button"
      class = "power-btn"
      label = "<span font-size='40pt'></span>"
      on_click = "!shutdown now"

      [[end.popup.widgets.widgets]]
      type = "button"
      class = "power-btn"
      label = "<span font-size='40pt'></span>"
      on_click = "!reboot"

    [[end.popup.widgets]]
    type = "label"
    name = "uptime"
    label = "Uptime: {{30000:uptime -p | cut -d ' ' -f2-}}"

[[end]]
type = "clock"

Styling

.power-menu {
    margin-left: 10px;
}

.power-menu #power-btn {
    color: white;
    background-color: #2d2d2d;
}

.power-menu #power-btn:hover {
    background-color: #1c1c1c;
}

.popup-power-menu {
    padding: 1em;
}

.popup-power-menu #header {
    color: white;
    font-size: 1.4em;
    border-bottom: 1px solid white;
    padding-bottom: 0.4em;
    margin-bottom: 0.8em;
}

.popup-power-menu .power-btn {
    color: white;
    background-color: #2d2d2d;
    border: 1px solid white;
    padding: 0.6em 1em;
}

.popup-power-menu .power-btn + .power-btn {
    margin-left: 1em;
}

.popup-power-menu .power-btn:hover {
    background-color: #1c1c1c;
}