Giter Club home page Giter Club logo

quick-view's Introduction

Quick View for Sublime Text

License Version Downloads

This package for Sublime Text provides preview popups for images and CSS colors on mouse hover.

The design of the hover popups is intended to reproduce the style of the Quick View feature from Adobe Brackets, but it uses adaptive colors based on the color scheme and the plugin logic was written from scratch.

Installation

The package can be installed via Sublime Text's package manager Package Control. From the command palette select Package Control: Install Package and search for QuickView.

Preview

Image popup

Color popup

Usage and Features

Hover over an image link or CSS color in a supported syntax to show a preview popup. Previews for CSS gradients are not yet supported. Image previews are possible for the following file formats:

  • PNG
  • JPEG
  • GIF
  • BMP
  • SVG
  • WebP
  • AVIF

The SVG, WebP and AVIF formats require a supported image converter program installed and present in the PATH and they must be activated in the package settings. Select Preferences > Package Settings > QuickView from the menu or Preferences: QuickView Settings from the command palette to open the package settings and to see the supported converters.

Image and color previews for the current cursor position or selection can also be invoked from the command palette or by adding a key binding for the quick_view command. When invoked this way, preview popups are also possible for images and colors in plain text and they are attempted to be shown even if the preview on hover for images or colors is disabled in the settings.

quick-view's People

Contributors

jwortmann avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

quick-view's Issues

Improved Instructions

This package is great and does just what I wanted, but I'd to make it work for svg too. Can you add some more details to the instructions: "an installed image converter program available in the PATH and must be activated in the package settings." to make it clearer and easier to use?

Support aliases

Disclaimer: I have not tried this package yet and not sure if it would be useful in my workflow.

Having said that, I work with projects that refer to files using an alias. So for example a path like ~/assets/images/foo.png refers to a directory <repo>/app/assets/images/foo.png. The alias can also be ~~, @ or @@.

It might be useful to support that. The user would define a map of aliases and according paths. Something like:

        "aliases": {
            "~": "app",
        },

Ideally the paths relative to the project directory would be supported or there would be support for expanding variables.

Preview Size

Is it possible to add this? Where could I modify it on the code if I'd like to contribute?

I'm interested in choosing to see the preview in either full size, a % or a fixed max size.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.