gingersoulrecords / mobiuswp-community Goto Github PK
View Code? Open in Web Editor NEWA public repo for bug reports and feature requests.
A public repo for bug reports and feature requests.
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
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)
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
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
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;
}
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);
}
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;
}
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)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.