Giter Club home page Giter Club logo

ubersicht-clock's Introduction

Übersicht Clock

A Übersicht widget to display time and greeting with username.

Installation

Download the quote-of-the-day.widget.zip and unzip it to your widgets folder (default: ~/Library/Application Support/Übersicht/widgets).

Preview

Preview

Settings

Greetings

The greetings default language is English, and will translated to your browser/computer language.

Currently Supported languages are:

  • Arabic
  • Chinese
  • English (default)
  • French
  • German
  • Japanese
  • Russian
  • Spanish

PadZero

The default time does not pad a zero to ours less than 10, if you want a zero padded to hours less than 10. For example 09:30AM instead of 9:30AM, set the value bellow to true

/**
 * Decide if zero should be padded to hour example: 9:30PM => 09:30PM
 */
export const usePadZero = false; //true/false

Time separator

Change the value bellow if you want don't want the time separator to flash

/**
 * Decide if time separator should flashed
 */
export const flashTimeSeparator = true; //true/false

Seconds

Change the boolean value bellow if you want the second to be display, this will make the time position to be jumpy

/**
 * Decide if seconds should be displayed
 */
export const displaySeconds = false; //true/false

Military

Change the boolean value bellow to use 24h time

/**
 * Decide if 24h time should be converted to military time example: 13:30 => 1:30PM
 */
export const useMilitaryTime = true; //true/false

Font-Family

I am using Space Age, it free for personal use, download and install on your machine to use it or change the font-family to your desired one. The font-family will use your system font if you don't change it.

font-family: "space age", -apple-system, BlinkMacSystemFont, Verdana, "Helvetica Neue", Helvetica, sans-serif;

Time, AM/PM, Greetings font-size

Edit the respective class font-size to change it to your liking

.time {
    font-size: 9.5rem;
  }
.am_pm {
    font-size: 2.625rem;
  }
  .greeting {
    font-size: 3rem;
  }

Date (optional)

I use this Calendar widget so I don't need to display the date on th widget if you would like to enable the widget date change the value below to true

/**
 * to have the date parse as something like Feb 17m 2022 instead of 02/17/2022
 * not I have not test this as I currently don't have access to a mac
 * 
 */
export const useAlternateCommand = false;
/**
 * Enable date in widget
 * uses local format e.g: 02/17/2022 for english (I'll probably improve it and display day,month name)
 */
export const showDate = false; //true/false
  // change the key (default is b => dateFormat.b) keys are a => Thu, 17 Feb, 2022, b => Feb 17, 2022, c => 17 Feb, 2022
  const date = useAlternateCommand ? setDateFormat(datetime[1], dataFormat.b) : datetime[1];

To Do

  • [] Add more languages
    • Ukrainian
    • Dutch
  • [] Fix time width being jumpy (current solution, use monospace fonts)

Contribution

To add more language edit the lang.json file and add the new language, test it and make a pull request Improvements are welcome.

If you like it give it a start :D

ubersicht-clock's People

Contributors

kushitecoder avatar stonec0der avatar

Watchers

 avatar  avatar

ubersicht-clock's Issues

Date in widget

Per request. Could you add the date to the widget?
Copy/paste code is sufficient

Thanks

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.