gingersoulrecords / mobiuswp-community Goto Github PK

Need documentation on comments levels and what that does to auto create outline tree

When typing -- it would be awesome for it to have autocomplete based on the variables set in the :root

So I could type --clr and it would autocomplete --clr-primary, --clr-secondary, etc

And when selected, would then place it inside of var() if it wasn't already typed

Show iframe dimensions on resize when mobius is docked like dev tools does to make writing media queries easier

Toolbar buttons aren't currently full height. Add this to make them easier to click

#mobius-toolbar {
  align-items: stretch;
}

when toggling output previews off, sometimes they toggle back on when you click on the output panel:

PS: idk if you can replicate, but I'm also getting a bug where if you select a preview, then unselect the preview (viewing regular iframe), then click outside of the output panel (css or dev tools), then sometimes it switch back to the preview. Or sometimes clicking on the output panel will switch it to the preview too. (edited)

This list should autocomplete with () and add the cursor inside of the ( | )

Selectors:

:is()
:where()
:has()
:not()
:nth-child()
:nth-of-type()
:nth-last-of-type()
:nth-last-child()
:dir()
:lang()

Properties:

translateX()
translateY()
translateZ()
translate()
translate3d()
rotateX()
rotateY()
rotateZ()
rotate()
rotate3d()
scaleX()
scaleY()
scaleZ()
scale()
scale3d()
skewX()
skewY()
skew()
matrix()
matrix3d()
perspective()
calc()
min()
max()
clamp()
round()
mod()
rem()
sin()
cos()
tan()
asin()
acos()
atan()
atan2()
pow()
sqrt()
hypot()
log()
exp()
abs()
sign()
blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()
rgb()
hsl()
hwb()
lch()
oklch()
lab()
oklab()
color()
color-mix()
color-contrast()
device-cmyk()
linear-gradient()
radial-gradient()
conic-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
repeating-conic-gradient()
image()
image-set()
cross-fade()
element()
paint()
counter()
counters()
symbols()
circle()
ellipse()
inset()
polygon()
path()
attr()
env()
url()
var()
fit-content()
minmax()
repeat()
stylistic()
styleset()
character-variant()
swash()
ornaments()
annotation()
cubic-bezier()
steps()
scroll()
view()

Mobile phone panel and tablet panel (pick your screen sizes for each in settings panel)

Show screen size of preselected device screen sizes in docked mode similar to how Devtools does

I'd be curious to hear your thoughts but I think that the default mode when firing up Mobius for the first time should be

• Docked (left or right)
• Full Screen Height
• No device emulation

Icon only option for buttons in settings panel

Option to pick side mobius toolbar is on in settings panel (bottom left or bottom right)

Import/Export settings to move Mobius settings from one site to another. Just a JSON import/export field?

If you open the Docked editor, and then close Mobius, then reopen Mobius, the blue grid background and screen size selection UI doesn't show up the second time you open Mobius.

It thinks that you're still in the Overlay mode because the Docked Editors button is still there instead of saying Overlay Editors. If you click on Docked Editors then it corrects the screen and takes you into the docked mode.

...to keep the admin bar from ever showing in the iframe.

Can we make ! autocomplete to !important without the tab? Saves a keypress

Settings page, select file to mirror what's in Mobius.

Can have multiple instances of mobius open in different tabs and they will overwrite each other

Add PostCSS Autoprefixer button to add vendor prefixes

Need keyboard shortcuts documentation

It would be great to ignore/strip = from showing in the Outline Panel so you could also do comments like

/* ==================
    1.4 - Typography
   ================== */

Maybe even consecutive dashes. We'd need to be careful here so we don't strip real dashes but if there are more than say 3 in a row, then strip them?

/* ------------------
    1.4 - Typography
   ------------------ */

Double Cmd tap accidental. Since Cmd + ; does the same thing, maybe get rid of it

Maybe a section in the docs for common customizations to mobius? Show what's possible with some cool examples. Might be a selling feature to some - showing how customizable it is

Mobius missing logo in WP update window -> /wp-admin/update-core.php

Border radius in settings panel is inherited from .jsPanel-standard .jsPanel-content

Needs a more specific selector for the settings panel to remove the border radius

Heading comment expand -> hcm + Tab?

If you cmd / on a selector, it could comment out the whole style rule, not just the line you’re on.

Like this. If your cursor is clicked on two-col, then it should comment out the whole thing. But if you cursor is clicked on column-gap, then it should only comment out that column-gap line.

.two-col .fl-rich-text {
  column-count: 2;
  column-gap: 40px;
}

Remove this z-index. It is causing issues (as you can see below) and is being overwritten because it's a higher specificity than the other selector.

Dock the editor to the right or left side of the window by dragging it to one side or the other, and have the content not flow behind it

Negative position should never be possible when panel is floating. Currently if you resize your screen, then it can go off the screen. It should probably just shrink?

In the WP dashbaord, move Mobius plugin settings page to live under Settings instead of being a top level menu item

Having the second iframe in the settings panel is an awkward place for it since it only is for the docked mode, not overlay.

I would recommend moving it into the bottom toolbar and then only showing it when it is in docked mode. As a user, I didn't know what it was referencing in the settings panel. But if it showed up in the toolbar when it made sense to, then it would make sense.

And maybe it then gets renamed to Second Viewport?

Dark mode jspanel doesn’t have a dark background and shows when you have very little css

.jsPanel-standard .jsPanel-content{
 _Currently set to transparent which is showing up as white_
}

In a dark theme, this should be set to the same color as the editor bg

The 'Toggle Output' text might need to be changed a little for clarity.

Maybe toggle the text between... "Overlay Editor" and "Docked Editor" or something?

The text Toggle Output doesn't really explain what it is doing to the end user. I understand why you named it that, but to the end user, they might not realize that they are actually switching between the overlay and an iframe.

This rule is making the editor act really weird. The font was re-rendering every time I typed.

body{
    font-family: var(--ff-text);
}

There are 2 drag icons across the top when in 'Show Responsive' mode as well. There should only be the one on the right when in that mode. It makes it confusing to have two

Save is removing border on hover and active. And adding it on hover. Currently it is doing this:

.mobius-save-panel,
.mobius-save-panel:hover,
.mobius-save-panel:active {
    border: none;
}

I know you're working on some save stuff, but feel free to steal my panel save button CSS. Lmk what you think

.mobius-save-panel,
.mobius-save-panel:active,
.mobius-save-panel:focus{
    border: 2px solid var(--gray-700);
    transition: border .2s ease-in-out;
}
.mobius-save-panel:hover,
.mobius-save-panel:focus-visible{
    border: 2px solid var(--accent-900)
}
.mobius-save-panel.border-unsaved{
    border: 2px solid #7c3aed;
}
.mobius-save-panel.mobius-saving {
    border: 2px solid transparent;
    animation: pulsing-border 1s linear infinite;
}
.mobius-save-panel.mobius-saved{
    border: 2px solid var(--accent-300);
}

@keyframes pulsing-border {
    0% {
        border-color: #7c3aed;
    }

    50% {
        border-color: transparent;
    }

    100% {
        border-color: #7c3aed;
    }
}

ZP reported a bug

I just discovered something that I think will bother you too. If you use emmet, and it auto completes something with a ;
ex: bg + tab = background: #000;

And places the cursor highlighting the #000 so you can start typing (which is great), then you get to the end and if you type ; out of habit, then it does ;;

If there is ever a ; and you type ; then it should just place you cursor after the ; (whether that means deleting the existing ; and letting you ; replace it, or if it means ignoring your ; and placing the cursor after it)

Basically, it should never allow more than one ; in a row.

When trying to launch Mobius inside of BB, the tab freezes and getting bazillion Uncaught errors in the console

Give the user a way to add their own custom text expansions in a settings panel

Floating panel should have max size smaller than viewport.

This helps keep some of the overflowing off the screen from happening:

.jsPanel{
    max-height:90vh;
    max-width:95vw;
}

Show an indicator that there are unsaved changes. For example, In Customizer the Publish button is grayed out. Then when you make a change, then it changes to blue:

Option in settings panel to have 2 vs 4 spaces per indent

Need a changelog located at https://mobiuswp.com/changelog

Custom emmet in settings panel (json object or repeater)