Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[UI] Icon #10

Open
53 of 54 tasks
Tracked by #56
, #35 ,  #39 ,  #24 ,  #57 ,  #58 ,  #60 ,  #14 ,  #27 ,  #15 ,  #23 ,  #117 ,  #99 ,  #229 ,  #93 ,  #86 ,  #67 ,  #29 ,  #96 ,  #68
...
fionataeyang opened this issue Dec 24, 2020 · 5 comments
Open
53 of 54 tasks
Tracked by #56
, #35 ,  #39 ,  #24 ,  #57 ,  #58 ,  #60 ,  #14 ,  #27 ,  #15 ,  #23 ,  #117 ,  #99 ,  #229 ,  #93 ,  #86 ,  #67 ,  #29 ,  #96 ,  #68
...

[UI] Icon #10

fionataeyang opened this issue Dec 24, 2020 · 5 comments
Assignees
@ninabreznik

Comments

@fionataeyang
Copy link
Contributor

fionataeyang commented Dec 24, 2020 •
edited by ninabreznik

@todo

  • implement first iteration of component
    • set up local dev environment with pnpm
      • pnpm link the modules locally
        • pnpm link --global (to make them available)
        • pnpm link --global <./package.json#name>
    • create repository
    • @output 📦 repository
  • refactor component and its dependencies and tag with v0.0.0-prealpha
    • @input 📦 repository
    • refactor very old commit with domlog and old button/icon to use versions
    • rebase main branch on top of taged version
    • update package.json (new path for the dependencies)
    • @output 📦 v0.0.0-prealpha
  • refactor component for last Fiona's commit and tag it with v0.0.0-alpha
    • @input 📦 v0.0.0-prealpha
    • refactor commit with latest terminal/log to use versions
    • move terminal/logs to dev dependencies
    • rebase main branch on top of taged version
    • update package.json (new path for the dependencies)
    • @output 📦 v0.0.0-alpha
  • refactor component latest commit with new comm protocol and tag with v0.0.1-alpha
    • @input 📦 v0.0.0-alpha
    • refactor latest commit with latest terminal/log to use versions
    • refactor communication protocol to use latest message standard
    • move terminal/logs to dev dependencies
    • rebase main branch on top of taged version
    • update package.json (new path for the dependencies)
    • update github page links
    • build new bundle.js to include changes in demo page
    • @output 📦 v0.0.1-alpha
  • implement next component version v0.0.2-alpha
    • @input 📦 v0.0.1-alpha
    • fix bugs & add features for v0.0.2
      • Use shadowDOM
      • Icon demo
      • Support SVG
      • Add style
      • Support custom style
      • Refactor codes(protocol, receive, recipients)
      • refactor all messages and status and update documentation
    • document component api in readme
      • list all opts
      • list all roles
      • list all incoming message types
      • list all outgoing message types
      • list all possible status the component instance can be in
      • note: icon has no states and no protocol
      • @output 📦 README.md
    • install latest dev dependencies
      • budo
      • browserify
      • datdot-terminal (add in v0.0.3)
    • update github page links
    • build new bundle.js to include changes in demo page
    • update package.json (new path for the dependencies)
    • @output 📦 v0.0.2-alpha
  • refactor component latest commit with new comm protocol and tag with v0.0.3-alpha
    • @input 📦 v0.0.2-alpha
    • document component api in readme or whatever needs to show in the readme
  • Implement next component version v0.0.4-alpha
    • @input 📦 v0.0.3-alpha
    • update theming (use stylesheets + allow to send a new stylesheet that overwrites the default one)
    • update readme
    • add help logic
    • add update (theme + opts)
    • add default opts and theme
    • @output 📦 repository#v0.0.4-alpha

@info

Repo 📂

https://github.com/datdot-ui/icon
@fionataeyang fionataeyang self-assigned this Dec 24, 2020
@serapath serapath mentioned this issue Feb 17, 2021
Open
6 tasks
@serapath
Copy link
Member

serapath commented Mar 7, 2021 •
edited

Icons

image

@serapath serapath changed the title [UI] Graphic [UI] Icons Mar 7, 2021
@serapath serapath mentioned this issue Mar 7, 2021
Open
@fionataeyang fionataeyang changed the title [UI] Icons [UI] Graphic May 12, 2021
@fionataeyang
Copy link
Contributor Author

fionataeyang commented May 12, 2021 •
edited

image

Import

const Icon = require('datdot-ui-icon')

Options

  • name is SVG name,
    for example: arrow-left.svg in src/svg, then name in options that you can write name: 'arrow-left'
  • src/svg is path by default,
    for example: if path id not in same as src/svg, the path is under URL as SVG path like http://datdot.org or assets/img, then path in options that you can write path: 'http://datdot.org' or path: 'assets/img' to change the default defined path
  • theme is an Object that can choose one style or props to custom or change the default defined styles.
const icon_name = Icon({
    name, 
    path, 
    theme: { 
         style, 
         props: {
             fill,
             size
         }
   }
})

In demo.js

const Icon = require('datdot-ui-icon')

const iconCheck = Icon({
name: 'check', 
theme: {
   // custom css style, replace original styles
    style: `
    :host(i-icon) span {
        padding: 4px;
        background-color: hsl(var(--color-greyF2));
    }
    :host(i-icon) svg g { 
        --fill: var(--color-amaranth-pink);
        stroke-width: 1;
        stroke: hsl(var(--color-amaranth-pink));
    };
    ` ,
   // replace original css variables 
    props: {
        fill: 'var(--color-persian-rose)',
        size: '8rem'
    }
}})

In index.js

:host(i-icon) span {
     --size: ${size ? size : '20px'};
....
}
:host(i-icon) svg g {
     --fill: ${fill ? fill : 'var(--primary-color)'};
...
}

This was referenced May 12, 2021
Open
Open
Open
Open
Open
Open
Open
Open
Open
Open
Open
Open
Open
Open
Open
Open
Open
Open
Open
@fionataeyang fionataeyang changed the title [UI] Graphic [UI] Icon Jun 23, 2021
@ninabreznik ninabreznik mentioned this issue Mar 25, 2022
Open
6 tasks
This was referenced Mar 25, 2022
Open
Open
Open
This was referenced Apr 15, 2022
Open
Open
Open
@serapath serapath removed UI labels Apr 15, 2022
@serapath
Copy link
Member

@ninabreznik
worklog 2022.04.07 - locking UI elements

Notes:

  • v.0.0.1-alpha: ui elements, updated to use new comm protocol
  • 0.0.0-alpha: ui elements in the original Fiona's state (only a few)

Results:

v0.0.1-alpha (using new comm proto)

0.0.0-alpha (old/Fiona's original)

@serapath
Copy link
Member

@ninabreznik
worklog 2022.04.12 - versioning and documenting components

results:

@ninabreznik
Copy link
Member

ninabreznik commented Apr 18, 2022 •
edited

[datdot ui worklog] working on v0.0.2-alpha Apr 18, 2022

results:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ninabreznik ninabreznik

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@ninabreznik @serapath @fionataeyang