Project

General

Profile

Support #3773

Button: Info / Unlock / ShowPassword

Added by Carsten Rose over 3 years ago. Updated over 3 years ago.

Status:
Closed
Priority:
Normal
Assignee:
Target version:
-
Start date:
21.05.2017
Due date:
% Done:

100%

Estimated time:
Discuss:

Description

Fuer Lehrkredit benoetigt QFQ die optionala Anzeige von 'viel' Hilfetext der eingeblendet bleibt (= Placeholder funktioniert nicht, Spalte
note' ist zu wenig).


Related issues

Related to QFQ - Support #3565: Optional toggle infoClosed2017-04-13

Related to QFQ - Feature #3564: Inputfields switch locked / unhide passwordClosed2017-04-13

Associated revisions

Revision 43b77a6c (diff)
Added by Carsten Rose over 3 years ago

Mockup fuer Button Info/Unlock/PasswordShow - Aenderungen von Benj fuer Benj eingetragen

Revision b5510306 (diff)
Added by Carsten Rose over 3 years ago

#3773 / Button: Info / Unlock / ShowPassword
FE_PARAMETER: extraButtonLock / extraButtonPassword:

Revision e338a187 (diff)
Added by Carsten Rose over 3 years ago

#3773 / Button: Info / Unlock / ShowPassword
FE_PARAMETER: extraButtonInfo.

History

#1 Updated by Carsten Rose over 3 years ago

  • Assignee set to Benjamin Baer

Benj hat ein Mockup gemacht wie es in QFQ implementiert werden soll

http://user.math.uzh.ch/baer/dev/

Das Mockup `/home/a/crose/PhpstormProjects/qfq/mockup/buttonInfoLockPassword.html` (kopiert von Benj) funktioniert nicht (BS und anderes wird nicht gefundn).

Bitte die Pfade anpassen (Referenc in den anderen Mockups). Was nicht benoetigt wird bitte rausnehmen.

Danach das Ticket bitte zurueck zu mir.

#2 Updated by Carsten Rose over 3 years ago

  • Priority changed from Normal to High

#3 Updated by Benjamin Baer over 3 years ago

laesst mich fileaenderungen nicht einchecken.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="../css/jqx.base.css">
    <link rel="stylesheet" href="../css/jqx.bootstrap.css">
    <link rel="stylesheet" href="../css/qfq-bs.css">
    <title>Input Mode Switcher</title>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-10 ">
            <div class="btn-toolbar pull-right" role="toolbar">
                <div class="btn-group" role="group">
                    <button id="save-button" type="button" class="btn btn-default navbar-btn"><span
                            class="glyphicon glyphicon-ok"></span></button>
                    <button id="close-button" type="button" class="btn btn-default navbar-btn"><span
                            class="glyphicon glyphicon-remove"></span></button>
                </div>
                <div class="btn-group" role="group">
                    <button id="delete-button" type="button" class="btn btn-default navbar-btn"><span
                            class="glyphicon glyphicon-trash"></span></button>
                </div>
                <div class="btn-group" role="group">
                    <a id="form-new-button" href="personmock.html?s=badcaffe1" class="btn btn-default navbar-btn"><span
                            class="glyphicon glyphicon-plus"></span></a>
                </div>
            </div>
        </div>
    </div>
    <form id='myForm' method='post'
          accept-charset='UTF-8' autocomplete='on' enctype='application/x-www-form-urlencoded'
          class='form-horizontal' data-toggle='validator'>

        <div class="form-group clearfix">
            <div class="col-md-3">
                <label>Label</label>
            </div>
            <div class="col-md-6">
                <div class="input-group">
                    <input id="input1" name="name" class="form-control" type="text" placeholder="Name" readonly>
                    <div class="input-group-btn">
                        <button class="btn btn-success" 
                                onclick="$('#input1').prop('readonly',!$('#input1').prop('readonly'))">
                            <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-md-3 qfq-note">
                <p>Note</p>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-3">
                <label>Password</label>
            </div>
            <div class="col-md-6">
                <div class="input-group">
                    <input id="passwordinput" type="password" name="password" class="form-control" type="text" 
                           placeholder="Password">
                    <div class="input-group-btn">
                        <button class="btn btn-info" 
                                onclick="$('#passwordinput').attr('type',$('#passwordinput').attr('type')==='password' ? 'text': 'password')">
                            <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-md-3 qfq-note">
                <p>Note</p>
            </div>
        </div>

        <div class="form-group clearfix">
            <div class="col-md-3">
                <label>Statement</label>
            </div>
            <div class="col-md-6">
                <textarea class="form-control" rows="20" placeholder="Please give a brief statement of purpose, such as the topics of your main mathematical interest, your past work in mathematics, of your academic plans in graduate school and your subsequent career objectives."></textarea>
                <span class="glyphicon glyphicon-info-sign text-info qfq-icon-inside" aria-hidden="true" onclick="$('#qfq-info-201').slideToggle('swing')"></span>
                <div class="alert alert-info" id="qfq-info-201" style="display: none;">
                    <p>Please give a brief statement of purpose, such as the topics of your main mathematical interest, your past work in mathematics, of your academic plans in graduate school and your subsequent career objectives.</p>
                </div>
            </div>
            <div class="col-md-3 qfq-note">
                <p>Note</p>
            </div>
        </div>

        <div class="form-group clearfix">
            <div class="col-md-3">
                <label>Name</label>
            </div>
            <div class="col-md-6">
                <div class="input-group">
                    <input type=name="name" class="form-control" type="text" placeholder="Name">
                    <div class="input-group-btn">
                        <button class="btn btn-info" onclick="$('#qfq-info-202').slideToggle('swing')">
                            <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
                        </button>
                    </div>
                </div>
                <div class="alert alert-info qfq-margin-top" id="qfq-info-202" style="display: none;">
                    <p>Please give a brief statement of purpose, such as the topics of your main mathematical interest, your past work in mathematics, of your academic plans in graduate school and your subsequent career objectives.</p>
                </div>
            </div>
            <div class="col-md-3 qfq-note">
                <p>Note</p>
            </div>
        </div>

    </form>
</div>

<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/validator.min.js"></script>
<script src="../js/jqx-all.js"></script>
<script src="../js/EventEmitter.min.js"></script>
<script src="../js/qfq.debug.js"></script>
<script type="text/javascript">
    $(function () {
        var qfqPage = new QfqNS.QfqPage({
            tabsId: 'myTabs',
            formId: 'myForm',
            submitTo: 'api/' + $("#submitTo").val(),
            deleteUrl: 'api/' + $("#deleteUrl").val(),
            fileUploadTo: 'api/' + $("#uploadTo").val(),
            fileDeleteUrl: 'api/' + $("#fileDeleteUrl").val(),
        });

        QfqNS.Log.level = 0;

    });
</script>
</body>
</html>

Das funktioniert so bei mir

#4 Updated by Benjamin Baer over 3 years ago

  • Status changed from New to Feedback
  • Assignee changed from Benjamin Baer to Carsten Rose

#5 Updated by Carsten Rose over 3 years ago

  • Status changed from Feedback to Closed
  • Priority changed from High to Normal

Hallo Benj

habe die Aenderungen eingecheckt und sieht gut aus - vielen Dank.

Das Du nicht committen konntest ist komisch, du bist genauso als Manager eingetragen wie ich. Evtl. hat es etwas mit dem Master Branch zu tun.

Bzgl. der weiteren Tasks melde ich mich.

Danke

CU
Carsten

#6 Updated by Carsten Rose over 3 years ago

  • Status changed from Closed to In Progress

#7 Updated by Carsten Rose over 3 years ago

  • Assignee changed from Carsten Rose to Benjamin Baer
  • Priority changed from Normal to High

Hallo Benj

koenntest Du Dir mal den Status Quo anschauen unter:

http://qfq.math.uzh.ch/crose/qfq-jqw/index.php?id=extrabutton

1) Die Textinfo Boxen haben einen Abstand zum Input. In Deinem Mockup ist das nicht der Fall.
2) Bei dem textarea ist das (i) falsch positioniert.

Vielen Dank

CU
Carsten

#8 Updated by Carsten Rose over 3 years ago

  • qfq-margin-top entfernt fuer 'info'
  • Sieht jetzt gut aus.
  • Warum macht das bei BB kein Problem?

#9 Updated by Carsten Rose over 3 years ago

  • Status changed from In Progress to Closed
  • Assignee changed from Benjamin Baer to Carsten Rose
  • Priority changed from High to Normal
  • % Done changed from 50 to 100

#10 Updated by Carsten Rose over 3 years ago

#11 Updated by Carsten Rose over 3 years ago

  • Related to Feature #3564: Inputfields switch locked / unhide password added

Also available in: Atom PDF