Skip to main content
SimilarExport ZIP
100%

Popupmenu Plan

✓ Published0🌍 Public
KKevinGutowski
Last edited Dec 24, 2020
Created on Dec 24, 2020

This example shows a macOS status bar popup menu with a search field and selectable items, built using AppKit’s NSMenu, NSMenuItem, NSStatusBarButton, and NSTextField. A custom SMBMenu subclass populates the menu with a text input and action items, while extending NSStatusBarButton overrides mouseDown to highlight the button and display the menu programmatically via popUp(positioning:at:in:). The code relies on AppDelegate selectors for item actions and manages button highlighting through a deinit callback.

AI-generated description

Similar vizzes

Loading thumbnail…

Toggling Sketch menu items

This example demonstrates how to toggle menu items in a Sketch plugin by manipulating the application’s main menu. The code uses the Sketch JavaScript API, specifically `NSApplication.sharedApplication().mainMenu()` and `itemWithTitle` to locate the Plugins submenu, then targets the "BaseAlign" item. It disables the item with `setEnabled(false)` and sets its state to checked with `setState(true)`. The menu is accessed directly through Cocoa’s AppKit framework, showing how plugin authors can programmatically control UI elements.

KKevinGutowski
57% match
Loading thumbnail…

Color Picker Sketch [WIP]

A prototype color picker dialog built with macOS AppKit. It shows a modal alert containing an `NSView` with a single `MSColorWell` button, pre-set to red, which can display a popover when clicked. The code constructs the alert, adds the color well as an accessory view, and runs the dialog modally via `runModal`. The action `presentColorPicker:` handles the well’s interaction, though its implementation is not shown.

KKevinGutowski
54% match
Loading thumbnail…

Progressbar modal

This example demonstrates a modal progress bar displayed over the main application window, using a native macOS sheet to block interaction while a short task runs. The code creates an `NSProgressIndicator` with a blue tint, embeds it in an `NSWindow` configured as a document-modal sheet, and attaches it via `beginSheet_completionHandler` on `NSApplication.sharedApplication().mainWindow()`. The progress animation starts immediately, and the sheet closes after a three-second delay using `setTimeout` and `endSheet`, illustrating Apple’s AppKit APIs in JavaScript via JSTalk-style syntax.

KKevinGutowski
53% match
Loading thumbnail…

Gist 03ea367d00ac593217cf6770ee1cc539

This example demonstrates a Sketch plugin that launches a floating panel window with a table view interface. The code uses Sketch’s JavaScript API, `NSThread`, `NSPanel`, and `NSMakeRect` to construct a 312×210 pixel textured window, position it at the screen center, and set it to float above other windows. It manages a thread dictionary key to prevent duplicate panels, toggling the window open or closed on repeated plugin runs. The plugin calls `document.showMessage()` for user feedback and hides the miniaturize and zoom buttons via `standardWindowButton`, with the table view setup currently stubbed out.

KKevinGutowski
51% match
Loading thumbnail…

Menus

This example shows a simple pet-selection interface with a dropdown menu. The App component uses React’s `useState` hook to track the chosen pet, initializing with “hamster” and logging each selection to the console. A reusable `Dropdown` component renders a native `<select>` element with options for six animals. The `bundle.js` file bundles the React code, while the page loads React and ReactDOM from unpkg and renders the interface into the `#root` div. Styling scales the label and select font to 4em for visibility.

Ww.fukuyama@gmail.com
50% match
Loading thumbnail…

Stack view example

This example demonstrates an NSStackView managing three colored radio buttons arranged vertically, showing how Auto Layout constraints position the stack view within an NSPanel window. The code creates a floating panel using AppKit classes like NSPanel and NSStackView, configuring the buttons with system blue, red, and green backgrounds. It sets orientation to vertical and applies spacing and alignment settings, then adds horizontal and vertical constraints to pin the stack view to the panel’s content view. The example also toggles a user default to visualize mutually exclusive constraints during layout debugging.

KKevinGutowski
49% match
Loading thumbnail…

Menus with React

This example demonstrates a React-based dropdown menu for selecting a pet from a predefined list. It uses React’s `useState` hook to manage the selected value, which is initialized to "hamster" and logged to the console on each change. The custom `Dropdown` component receives options, an id, the selected value, and a callback to update state, rendering native `<select>` and `<option>` elements. The UI is styled with custom CSS for enlarged font sizes, and ReactDOM renders the app into the root element.

Jjim25522532
49% match
Loading thumbnail…

Menu Example

This example demonstrates a simple dropdown menu for selecting a pet, with the chosen value displayed in the browser console. The interface uses React’s `useState` hook to manage the selected value, and the `Dropdown` component renders a native HTML `<select>` element with `<option>` tags. The pet options are hardcoded as an array of objects with value and label properties. The code leverages React 16.9 and ReactDOM to render the UI, with inline CSS controlling sizing and layout. The menu updates the selected state on change events, though no additional visualization is shown.

KKai Stewart
49% match