search

brackets-archive / bracketsIssues

Archive of issues in brackets.
0 stars 0 forks source link

[CLOSED] FEATURE REQUEST: Preview for Muse mucow OOUI flyout panel #10163

Open core-ai-bot opened 3 years ago

core-ai-bot commented 3 years ago

Issue by musesupplyco Friday Sep 25, 2015 at 21:27 GMT Originally opened as https://github.com/adobe/brackets/issues/11742

With several third-party vendors developing widget plugins for Adobe Muse, it would be a blessing to be able to preview the widget's OOUI user flyout panel based on the xml MuCOW file markup.

For example, the flyout panel as captured in the attached png image is a result of the xml markup below.

oscar flyout panel v1 5

<?xml version="1.0" encoding="UTF-8"?>

    <HTMLWidget name="Hover Card - Oscar v1.4" formatNumber="3" localization="none" creator="musesupplyco.com" defaultWidth="636" defaultHeight="294" isResizable="true" termsText="&lt;p&gt;HOVER CARD - OSCAR v1.4 (beta) &lt;br /&gt;Engineered and designed by &lt;a href=&quot;http://musesupplyco.com&quot;&gt;The Muse Supply Co.&lt;/a&gt;  &lt;br /&gt;&lt;br /&gt;For more information, go to &lt;a href=&quot;http://musesupplyco.com&quot;&gt;our site&lt;/a&gt;. Please report any issues to &lt;a href=&quot;mailto:hello@musesupplyco.com&quot;&gt;hello@musesupplyco.com&lt;/a&gt;.&lt;/p&gt;">

        <!-- SOURCE - http://tympanus.net/codrops/2014/06/19/ideas-for-subtle-hover-effects/
-->
        <parameters>

            <info label="Brought to you by the fine folks at Muse Supply." linkURL="http://musesupplyco.com" />

            <separator/>
            <info label="C A R D   O P T I O N S" />
            <separator/>

            <file name="img" label="Card Image" filterLabel="Images" fileTypes="*.jpg;*.jpeg;*.png;*.gif" fileRequiredForOutput="true" />

            <list name="fit" label="Fit image to" defaultValue="width: {param_width}px; height: auto">
                <value label="Width" name="width: {param_width}px; height: auto" />
                <value label="Height" name="height: {param_height}px; width: auto; margin: 0 auto" />
            </list>
            <!--
            <list name="position" label="Position" defaultValue="margin: 0 auto">
                <value label="Center Width" name="margin: 0 auto" />
                <value label="Center Height" name="margin: auto 0" />
                <value label="Top left" name=" "/>
            </list>
-->
            <text name="imgAlt" label="Alt text for image" defaultValue="Alt text" multiline="false" />
            <separator/>

            <color name="bgColor" label="Overlay Color" defaultValue="#fff" formatHexColor="true" supportsNoneColor="true" />

            <number name="bgOpacity" label="Overlay Opacity" defaultValue=".7" min="0" max="1" step=".05" snap=".01" digitsPrecision="2" />
            <separator/>
            <!--
            <text name="lText" label="Link text" defaultValue="Read more" multiline="false" />
-->
            <url name="link" label="Card hyperlinks to" defaultValue="http://musesupplyco.com/" currentPageOrURL="false" />

            <bool name="lTarget" label="Open Link in new window." defaultValue="target='_blank'">
                <trueVal value="target='_blank'" />
                <falseVal value=" " />
            </bool>

            <separator/>
            <info label="C A P T I O N   O P T I O N S" />
            <separator/>
            <number name="hLocation" label="Distance from Top (%)" defaultValue=".20" min="0" max="1" step=".05" snap=".01" digitsPrecision="2" toolTip="Value entered represents how far from the top of the container the text will begin, expressed as a percentage of the height of the container." />
            <list label="Force text justification" name="forceJustify" defaultValue="figure.effect-oscar h2, figure.effect-oscar p {text-align: center !important;}" toolTip="Although not required, this widget was designed with center justified text in mind.">
                <value name=" " label="None. Leave as defined" />
                <value name="figure.effect-oscar h2, figure.effect-oscar p {text-align: left !important;}" label="Left Justify" />
                <value name="figure.effect-oscar h2, figure.effect-oscar p {text-align: center !important;}" label="Center" />
                <value name="figure.effect-oscar h2, figure.effect-oscar p {text-align: right !important;}" label="Right Justify" />
            </list>
            <separator/>

            <text name="hText" label="Headline text" defaultValue="Warm Oscar" multiline="false" />

            <text name="hoverHeadly" label="Paragraph style for headline" defaultValue="hoverHeadline" />

            <separator/>

            <text name="pText" label="Paragraph text" defaultValue="Oscar is a decent man. He used to clean porches with pleasure." multiline="true" />

            <text name="hoverParagraph" label="Paragraph style for paragraph" defaultValue="hoverParagraph" />

            <!--
    <number name="pLocation" label="Distance from Bottom (%)" defaultValue=".20" min="0" max="1" step=".05" snap=".01" digitsPrecision="2" toolTip="Value entered represents how far from the top of the container the text will begin, expressed as a percentage of the height of the container." />
-->
            <!--
    <number name="inset" label="Text Inset" defaultValue="30" min="0" max="1000" step="10" snap="1" />
-->

            <separator/>
            <info label="H O V E R   O P T I O N S" />
            <separator/>
            <color name="gradColorOne" label="First Gradient Color" defaultValue="#22682a" formatHexColor="true" supportsNoneColor="true" />
            <color name="gradColorTwo" label="Second Gradient Color" defaultValue="#9b4a1b" formatHexColor="true" supportsNoneColor="true" />
            <number name="gradBreak" label="Second Gradient Spread (%)" defaultValue=".40" min="0" max="1" step=".1" snap=".01" digitsPrecision="2" />
            <color name="gradColorThree" label="Third Gradient Color" defaultValue="#3a342a" formatHexColor="true" supportsNoneColor="true" />
            <number name="gradColorAngle" label="Gradient Angle" defaultValue="45" min="-360" max="360" step="15" snap="1" digitsPrecision="0" />

            <number name="bgOpacityHover" label="Hover Opacity" defaultValue=".4" min="0" max="1" step=".01" snap=".01" digitsPrecision="2" />
            <separator/>
            <color name="hoverHeadlyColor" label="Headline text color upon hover" defaultValue="#fff" formatHexColor="true" supportsNoneColor="true" />
            <color name="hoverParagraphColor" label="Paragraph text color upon hover" defaultValue="#fff" formatHexColor="true" supportsNoneColor="true" />
            <separator/>
            <list name="strokeStyle" label="Border Style" defaultValue="solid">
                <value name="none" label="None" />
                <value name="dashed" label="Dashed" />
                <value name="dotted" label="Dotted" />
                <value name="solid" label="Solid" />
                <value name="double" label="Double" />
                <value name="groove" label="Groove" />
                <value name="ridge" label="Ridge" />
                <value name="inset" label="Inset" />
                <value name="outset" label="Outset" />
            </list>

            <color name="strokeColor" label="Border Color" defaultValue="#fff" formatHexColor="true" supportsNoneColor="true" />

            <number name="strokeWeight" label="Border Weight" defaultValue="1" min="0" max="100" step=".5" snap="1" />

            <number name="inset" label="Border Inset" defaultValue="30" min="0" max="1000" step="10" snap="1" />
            <!--
            <number name="drawStart" label="Draw Start" defaultValue="50" min="0" max="1000" step="5" snap="1" digitsPrecision="0" />

            <number name="drawEnd" label="Draw End" defaultValue="30" min="0" max="1000" step="5" snap="1" digitsPrecision="0" />
-->

            <builtIn name="width" />
            <builtIn name="height" />
            <builtIn name="itemUID" />

            <separator/>

            <info label="For more info, check out the Terms of Use below." />

        </parameters>

        <headHTML>
            <![CDATA[
<style>.grid{position:relative;margin:0 auto;list-style:none}.grid figure{background:{param_bgColor};position:relative;float:left;overflow:hidden;margin:0;min-width:{param_width}px;max-width:{param_width}px;max-height:{param_height}px;width:{param_width}px;cursor:pointer}.grid figure:hover{background:{param_bgColorHover}}.grid figure img{{param_fit}; opacity:{param_bgOpacity};position:relative;display:block}.grid figure:hover img{opacity:{param_bgOpacityHover}}.grid figure figcaption{position:absolute;top:0;left:0;width:calc({param_width}px - {param_inset}px - {param_inset}px);height:calc({param_height}px - {param_inset}px - {param_inset}px);padding:{param_inset}px;-webkit-backface-visibility:hidden;backface-visibility:hidden}.grid figure figcaption::before,.grid figure figcaption::after{position:absolute;content:'';opacity:0;pointer-events:none}.grid figure figcaption > a{width:100%;height:100%;z-index:1000;text-indent:200%;white-space:nowrap;font-size:0;opacity:0}figure h2,figure p{width:calc({param_width}px - {param_inset}px - {param_inset}px - {param_inset}px);margin:0 calc({param_inset}px / 2)}figure p{opacity:0}figure:hover h2{color:{param_hoverHeadlyColor};opacity:1}figure:hover p{color:{param_hoverParagraphColor};opacity:1}</style>
]]>
        </headHTML>
        <bodyBeginHTML>
            <![CDATA[
<style>
    figure.effect-oscar:hover {
        background: -webkit-linear-gradient({param_gradColorAngle}deg, {param_gradColorOne} 0%, {param_gradColorTwo} calc({param_gradBreak}% * 100), {param_gradColorThree} 100%);
        background: linear-gradient({param_gradColorAngle}deg, {param_gradColorOne} 0%, {param_gradColorTwo} calc({param_gradBreak}% * 100), {param_gradColorThree} 100%);
        width: 100%;
        height: 100%;
    }

    figure.effect-oscar img {
        max-width: none;
        -webkit-transition: opacity 0.35s;
        transition: opacity 0.35s;
    }

    figure.effect-oscar figcaption {
        -webkit-transition: background-color 0.35s;
        transition: background-color 0.35s;
    }

    figure.effect-oscar figcaption::before {
        top: {param_inset}px;
        right: {param_inset}px;
        bottom: {param_inset}px;
        left: {param_inset}px;
        border: {param_strokeWeight}px {param_strokeStyle} {param_strokeColor};
    }

    figure.effect-oscar h2 {
        margin-top: calc(({param_height}px * {param_hLocation}) + ({param_inset}px / 2));
        -webkit-transition: -webkit-transform 0.35s;
        transition: transform 0.35s;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
    }

    figure.effect-oscar figcaption::before,
    figure.effect-oscar p {
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-transform-origin: center;
        -ms-transform-origin: center;
        -o-transform-origin: center;
        transform-origin: center;
    }

    figure.effect-oscar:hover h2 {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
    figure.effect-oscar:hover figcaption::before,
    figure.effect-oscar:hover p {
        color: {param_hoverParagraphColor};
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    figure.effect-oscar:hover figcaption {
        background-color: rgba(58,52,42,0);
    }
 </style>
]]>
        </bodyBeginHTML>

        <pageItemHTML>
            <![CDATA[

<!-- This Hover Card - Oscar widget was engineered and designed by the team at MuseSupplyCo.com. -->

    <div class="grid">
    <figure class="effect-oscar">
        <img src="{param_img}" alt="{param_imgAlt}" />
        <figcaption>
            <h2 class="{param_hoverHeadly}">{param_hText}</h2>
            <p class="{param_hoverParagraph}">{param_pText}</p>
            <a href="{param_link}" {param_lTarget}>{param_lText}</a>
        </figcaption>
    </figure>
    </div>
]]>
        </pageItemHTML>

    </HTMLWidget>

For more info, contact doug@musesupplyco.com or the Adobe Muse project manager, dani@adobe.com

core-ai-bot commented 3 years ago

Comment by abose Monday Sep 28, 2015 at 07:56 GMT

Thanks for registering the issue. We have forwarded this issue to the Muse team. Will update soon.

core-ai-bot commented 3 years ago

Comment by JeffryBooher Monday Sep 28, 2015 at 16:37 GMT

Hi@musesupplyco,

Please post Muse Brackets feature requests here: https://github.com/Adobe-Muse/brackets-mucow-language-support

Thanks!

core-ai-bot commented 3 years ago

Comment by musesupplyco Monday Sep 28, 2015 at 17:23 GMT

Thanks Jeff! Will do so from now on.

Douglas Brandt Director

Muse Supply Company musesupplyco.com

facebook http://www.facebook.com/musesupplyco | twitter http://www.twitter.com/musesupplyco | youtube https://www.youtube.com/channel/UCpGlAmw2FNxSHCpcJz-nZZw | google+ https://plus.google.com/+Musesupplyco/

On Mon, Sep 28, 2015 at 11:39 AM, Jeff Booher notifications@github.com wrote:

Closed #11742 https://github.com/adobe/brackets/issues/11742.

— Reply to this email directly or view it on GitHub https://github.com/adobe/brackets/issues/11742#event-420950338.