diff --git a/client/components/dropdown/dropdown.jsx b/client/components/dropdown/dropdown.jsx index 0848f3fdd..b6ea37d13 100644 --- a/client/components/dropdown/dropdown.jsx +++ b/client/components/dropdown/dropdown.jsx @@ -92,12 +92,13 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, c }; return ( -
+
    • + ); }; diff --git a/client/components/dropdown/dropdown.less b/client/components/dropdown/dropdown.less index 28a26954c..8148a7c85 100644 --- a/client/components/dropdown/dropdown.less +++ b/client/components/dropdown/dropdown.less @@ -1,24 +1,33 @@ -.menu-wrapper { - position: relative; - &:is(.menu-bar > .menu-section > .menu-wrapper){ - display: inline-block; - } +@property --menuColor { + syntax: ''; + inherits: true; + initial-value: #DDD; } +@property --activeTriggerColor { + syntax: ''; + inherits: true; + initial-value: #DDD; +} + +:root{ + --activeTriggerColor : var(--activeTriggerColor); +} .menu-list { + contain : content; position : fixed; - z-index : 1000; top : anchor(bottom); left : anchor(left); position-try: flip-inline flip-block; color: inherit; // [popover] gets a `canvastext` color value from useragent. - > .menu-wrapper { - position:relative; - > .menu-list { + background: var(--menuColor); + li > .menu-list { margin: 0 0px; top : anchor(top); left : anchor(right); position-try: flip-inline; } - } +} +.menu-wrapper:has(:popover-open) > button { // if menu is open... + background-color: var(--activeTriggerColor, hsl(from var(--menuColor) h s calc(l * .85))); // tint menu triggers based on menu color } \ No newline at end of file diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx index dc921ffbb..96edbd49c 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.jsx +++ b/client/homebrew/editor/snippetbar/snippetbar.jsx @@ -188,7 +188,7 @@ const Snippetbar = createReactClass({ const snippets = this.state.snippets.filter((snippetGroup)=>snippetGroup.view === this.props.view); if(snippets.length === 0) return null; - return
    + return
      {_.map(snippets, (snippetGroup)=>{ return ; }) } -
    ; + ; }, replaceContent : function(item){ @@ -327,12 +327,14 @@ const SnippetGroup = createReactClass({ return _.map(snippets, (snippet)=>{ if(!snippet.subsnippets){ return ( - +
  • + +
    • ); } else if(snippet.subsnippets){ return ( diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less index 88cdcbc00..e49e02044 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.less +++ b/client/homebrew/editor/snippetbar/snippetbar.less @@ -3,6 +3,8 @@ @import (less) '@themes/fonts/5e/fonts.less'; .snippetBar { + --activeTriggerColor: inherit; + --menuColor : #DDDDDD; @menuHeight : 25px; position : relative; display : flex; @@ -16,12 +18,6 @@ text-transform: uppercase; font-weight: 800; - .snippets { - display : flex; - justify-content : flex-start; - min-width : 499.35px; //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied - } - .editors { display : flex; justify-content : flex-end; @@ -118,23 +114,7 @@ } } } - .snippetBarButton { - display : inline-block; - height : @menuHeight; - padding : 0px 5px; - font-size : 0.625em; - font-weight : 800; - line-height : @menuHeight; - text-transform : uppercase; - text-wrap : nowrap; - cursor : pointer; - &:hover, &.selected { background-color : #999999; } - i { - margin-right : 3px; - font-size : 1.4em; - vertical-align : middle; - } - } + .toggleMeta { position : absolute; top : 0px; @@ -143,20 +123,15 @@ .tooltipLeft('Edit Brew Properties'); } - - .menu-wrapper { - .menu-item:is(.snippets > .menu-wrapper > .menu-item):first-child { - .caret { - display: none; - } - } - .menu-list { - padding : 0px; - background-color : #DDDDDD; - - } + .snippets { + display : flex; + justify-content : flex-start; + min-width : 565.95px; //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied } + // removed caret for top level items, by request (makes buttons too wide). + .menu-wrapper .menu-item:is(.snippets > .menu-wrapper > .menu-item):first-child .caret { display: none; } + .menu-item { position : relative; display : flex; @@ -166,9 +141,8 @@ padding : 5px; cursor : pointer; width: 100%; - .animate(background-color); &:is(.menu-list .menu-item) [class*="name"] { - padding-inline: 8px; + padding-inline: 8px; // additional space between icon and name (helpful in Fonts menu especially). } .menu-name { flex: 1; @@ -214,8 +188,7 @@ } } .name { margin-right : auto; } - .disabled { text-decoration : line-through; } - .beta { + .status { align-self : center; padding : 4px 6px; margin-left : 5px; @@ -234,15 +207,8 @@ &:hover { background-color: unset; } } } - .disabledSnippets { - color: grey; - cursor: not-allowed; - - &:hover { background-color: #DDDDDD;} - } - } -@container editor (width < 750px) { +@container editor (width < 816px) { .snippetBar { .editors { flex : 1; diff --git a/client/homebrew/navbar/nav.jsx b/client/homebrew/navbar/nav.jsx index e836cfafa..d9d3ebef5 100644 --- a/client/homebrew/navbar/nav.jsx +++ b/client/homebrew/navbar/nav.jsx @@ -1,21 +1,16 @@ import './navbar.less'; import React, { useState, useRef, useEffect } from 'react'; -import createReactClass from 'create-react-class'; -import _ from 'lodash'; import cx from 'classnames'; import NaturalCritIcon from '@components/svg/naturalcrit-d20.svg.jsx'; const Nav = { - base : createReactClass({ - displayName : 'Nav.base', - render : function(){ - return ; - } - }), - logo : function(){ + base : ({ children, className, ...props })=>{ + return ; + }, + logo : ()=>{ return @@ -24,50 +19,26 @@ const Nav = { ; }, - section : createReactClass({ - displayName : 'Nav.section', - render : function(){ - return
    - {this.props.children} -
    ; + section : ({ children, className, ...props })=>{ + return
    + {children} +
    ; + }, + + item : ({ icon, href, newTab, onClick, color, children, className, ...props })=>{ + const classes = cx('navItem', color, className); + if(href){ + return + {children} + {icon && } + ; + } else { + return ; } - }), - - item : createReactClass({ - displayName : 'Nav.item', - getDefaultProps : function() { - return { - icon : null, - href : null, - newTab : false, - onClick : function(){}, - color : null - }; - }, - handleClick : function(e){ - this.props.onClick(e); - }, - render : function(){ - const classes = cx('navItem', this.props.color, this.props.className); - - let icon; - if(this.props.icon) icon = ; - - const props = _.omit(this.props, ['newTab']); - - if(this.props.href){ - return - {this.props.children} - {icon} - ; - } else { - return ; - } - } - }), + }, dropdown : function dropdown(props) { props = Object.assign({}, props, { diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx index aadadbd3b..5cc02c986 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx @@ -39,9 +39,9 @@ const BrewItem = ({ if(!brew.editId) return null; return ( - - - +